您的位置:首页 > 其它

attachEvent和addEventListener区别

2016-03-18 21:12 169 查看
一般来说,可以直接封装成这种形式:

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();
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: