js 添加事件 attachEvent 和 addEventListener

Posted 2020-11-10 猪猪快冲

我们在给组件添加事件的时候一般可以这样

 1 <input type="button" value="submit" onclick="method()" /> 

这种方法简单高效，但如果对同一个元素添加同一个事件的时候，会造成前面的方法失效，只运行最后一个

obj.onclick = method1;
obj.onclick = method2;
obj.onclick = method3;

最终 只会执行method3()方法，在IE11（不包括11）以下我们可以用 element.attachEvent(type, function)方法，值得注意的是，type事件类型 需要加上 "on"，例如点击事件，type="onclick",

obj.attachEvent("onclick",method1);
obj.attachEvent("onclick",method2);
obj.attachEvent("onclick",method3);

在执行时为倒序执行，method3 -> method2 -> method1, 可惜这是IE的专属方法，其他浏览器大部分都支持 W3C标准的 element.addEventListener(type,function,useCapture) 方法，type 类型这里不用加 "on" 例如

1 obj.addEventListener("click", method1, false);
2 obj.addEventListener("click", method2, false);
3 obj.addEventListener("click", method3, false);

执行顺序为 正序，即 method1 -> method2 -> method3

为了兼容性问题，前人重写了通用的注册事件的方法

function addEvent(elm, eType, fn, useCapture){
    if(elm.addEventListener){
        elm.addEventListener(eType, fn, useCapture);
        return true;
    }else if(elm.attachEvent){
        var r = elm.attachEvent("on"+eType, fn);
        return r;
    }else{
        elm[‘on‘+eType] = fn;
    }
}

其他博客流传的 Dean Edwards 的版本，功能强大，我就不贴出来了，贴一个H5版本

 1 var addEvent = (function(){  
 2     if(document.addEventListener){  
 3         return function(el,type,fn){  
 4             if(el.length){  
 5                 for(var i=0;i<el.length;i++){  
 6                     addEvent(el[i],type,fn);  
 7                 }  
 8             }else{  
 9                 el.addEventListener(type,fn,false);  
10             }  
11         };  
12     }else{  
13         return function(el,type,fn){  
14             if(el.length){  
15                 for(var i=0;i<el.length;i++){  
16                     addEvent(el[i],type,fn);  
17                 }  
18             }else{  
19                 el.attachEvent("on"+type,function(){  
20                     return fn.call(el,window.event);  
21                 });  
22             }  
23         };  
24     }  
25 })();