attachEvent和addEventListener区别

最新推荐文章于 2021-03-27 13:31:36 发布

weixin_34392843

最新推荐文章于 2021-03-27 13:31:36 发布

阅读量101

点赞数

本文详细介绍了在不同浏览器环境下实现事件绑定的多种方法，包括W3C标准的addEventListener、IE特有的attachEvent以及传统的属性赋值法，并探讨了这些方法在事件执行顺序上的差异。

一般来说，可以直接封装成这种形式：

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.οnclick=function (){
method1();
method2();
method3();
}