attachEvent和addEventListener区别
2016-03-18 21:12
169 查看
一般来说,可以直接封装成这种形式:
addEventListener的使用方式:主要是DOM2级
target.addEventListener(type, listener, useCapture);
target就是要注册事件的对象
type就是事件类型 比如“click"
listener就是监听的函数
useCapture就是是否使用捕获方式,false为冒泡,true为捕获
attachEvent使用方式:主要是IE中使用
target.attachEvent(type, listener);
type是事件类型,注意是这种形式:”onclick"
listener监听的函数
默认使用冒泡的方式
相应的,解除事件的方法:
removeEventListener(event,function,useCapture);
detachEvent(event,function);
补充:
1、addEventListener
适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->method3
2、attachEvent
在IE8及以下版本中,不支持addEventListener,只能用attachEvent绑定事件,执行顺序是 method3->method2->method1
3、属性赋值法绑定事件
适用该方法会使后绑定的方法覆盖前面的方法,要想一次性绑定多个(一次性执行多个操作,可以再一个事件中调用多个方法)
一次性绑定多个:
var addEvent = function(element,type,handler){ if(element.addEventListener){ //DOM2级 element.addEventListener(type,handler,false); //false为冒泡,true为捕获 }else if(element.attachEvent){ //IE element.attachEvent("on"+type,function(){ //默认皆为冒泡 handler.call(element); }); }else{ element["on"+type] = handler; //DOM0级 } };
addEventListener的使用方式:主要是DOM2级
target.addEventListener(type, listener, useCapture);
target就是要注册事件的对象
type就是事件类型 比如“click"
listener就是监听的函数
useCapture就是是否使用捕获方式,false为冒泡,true为捕获
attachEvent使用方式:主要是IE中使用
target.attachEvent(type, listener);
type是事件类型,注意是这种形式:”onclick"
listener监听的函数
默认使用冒泡的方式
相应的,解除事件的方法:
removeEventListener(event,function,useCapture);
detachEvent(event,function);
补充:
1、addEventListener
适用w3c标准方法addEventListener绑定事件,如下,事件的执行顺序和绑定顺序一致,执行顺序为method1->method2->method3
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
2、attachEvent
在IE8及以下版本中,不支持addEventListener,只能用attachEvent绑定事件,执行顺序是 method3->method2->method1
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
3、属性赋值法绑定事件
适用该方法会使后绑定的方法覆盖前面的方法,要想一次性绑定多个(一次性执行多个操作,可以再一个事件中调用多个方法)
obj.onclick=method1;
obj.onclick=method2;
obj.onclick=method3;
一次性绑定多个:
obj.onclick=function (){ method1(); method2(); method3(); }
相关文章推荐
- 网站分层架构图解
- 119. Pascal's Triangle II
- 172. Factorial Trailing Zeroes
- apache tomcat安装,windows10
- SystemBarTint实现自定义StatusBar颜色
- mybatis(三)-mybatis-config详解
- oracle通过dblink连接Mysql
- GMM的EM算法实现
- 102. Binary Tree Level Order Traversal
- 怎么办
- HDU-3790-最短路径问题
- 关于重写,重载,覆盖的一点体会
- 各种排序算法时间复杂度和空间复杂度表
- 云计算概念总结
- 十道智力题(一)
- ZOJ-2050-Flip Game【状态压缩bfs】
- 贪吃——1015
- 118. Pascal's Triangle
- MySql索引原理及慢查询优化
- model