我们在给组件添加事件的时候一般可以这样
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 })(); ?js 添加事件 attachEvent 和 addEventListener
原文地址：https://www.cnblogs.com/PigpigRun/p/9122484.html