关于JavaScript中事件绑定的方法总结


Posted in Javascript onOctober 26, 2016

最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看。

JavaScript中绑定事件的方法主要有三种:

1 在DOM元素中直接绑定

2 JavaScript代码中直接绑定

3 绑定事件监听函数

一、在DOM元素中直接绑定

也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子:

<input type="button" value="点我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" onclick="testAlert()">
<script type="text/javascript">
  function testAlert(){
   alert("hello world!");
  }
</script>

二、JavaScript代码中直接绑定

在JavaScript中通过查找DOM对象,对其绑定,elementObject.onclick=function(){} 的格式,举例如下:

<input type="button" value="点我呦" id="demo">
<script type="text/javascript">

  document.getElementById("demo").onclick=function testAlert(){
   alert("hello world!");
  }
</script>

三、绑定事件监听函数

这里需要了解addEventListener()和attachEvent()的函数语法。

1 elementObject.addEventListener(eventName,handle,useCapture) (支持主流浏览器、以及IE9.0及以上)

eventName:要绑定的事件名称。注意写法,比如点击事件,写成click,而不是onclick.

handle: 处理事件的函数名。但是写法上没有小括号。

useCapture:Boolean类型,是否使用捕获,一般用false,具体涉及到的会在后边总结。

2 elementObject.attachEvent(eventName,handle);(仅支持IE8及以下)

从网上找到了一个兼容的好办法,相比较if。。else语句,这个方法用的是try..catch错误处理语句,可以避免浏览器出现错误提示。

function addEvent(obj,type,handle){
  try{
   obj.addEventListener(type,handle,false);
  }catch(e){
   try{
    obj.attachEvent('on'+type,handle);
   }
   catch(e){
    obj['on' + type]=handle;//早期浏览器
   }
  }
}

四、说说JQuery中绑定事件的几种方法。

主要有on()、bind()、live()、delegate()等几种,相对应的解绑就是off()、unbind()、live()、undelegate();

1 on()、bind()、live()、delegate()中除了bind(),其他的都可以给后来追加的元素对象添加绑定事件。

2 这几种方法中各自有对应支持的JQuery版本。

3 在给动态添加的页面元素绑定事件时,通常用on()方法。

以上就是小编为大家带来的关于JavaScript中事件绑定的方法总结全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
Oct 18 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
vue小白入门教程
Apr 02 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 Javascript
WEB 前端开发中防治重复提交的实现方法
Oct 26 #Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 #Javascript
简单的js计算器实现
Oct 26 #Javascript
利用python分析access日志的方法
Oct 26 #Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
Oct 26 #Javascript
关于Jquery中的事件绑定总结
Oct 26 #Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 #Javascript
You might like
php笔记之:文章中图片处理的使用
2013/04/26 PHP
在Win7 中为php扩展配置Xcache
2014/10/08 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
轻松掌握JavaScript单例模式
2016/08/25 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
[01:48]完美圣典齐天大圣至宝宣传片
2016/12/17 DOTA
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
python实现神经网络感知器算法
2017/12/20 Python
Python自定义线程池实现方法分析
2018/02/07 Python
python学习入门细节知识点
2018/03/29 Python
python 对key为时间的dict排序方法
2018/10/17 Python
python爬取微信公众号文章的方法
2019/02/26 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
升职自荐书范文
2013/11/28 职场文书
环保倡议书50字
2014/05/15 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
运动会稿件100字
2014/09/24 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
北京天坛导游词
2015/02/12 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
Python基本数据类型之字符串str
2021/07/21 Python