引子：用javascript给元素绑定事件，我们可以用addEventListener这个方法，然而这个方法有兼容问题，比如在IE浏览器上面就无效，在IE上面要用attachEvent这个方法
一、addEventListener和attachEvent的区别：
1、addEventListener有3个参数，attachEvent只有2个参数，默认是冒泡
2、addEventListener的第一个参数是事件类型（例如：click）,attachEvent的第一个参数是事件处理函数名称（例如：onclick）
3、this的指向不同，addEventListener中的this,指的是触发的元素，attachEvent中的this指的window
4、为一个事件添加多个事件处理程序，执行的顺序不同，addEventListener会按照添加的处理程序顺序执行，attachEvent的执行顺序是随机的
二、兼容性封装处理：
举例的HTML结构如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>test001</title>
<style type="text/css">
.red{color:red;}
</style>
</head>
<body class="l-bg2">
<button id="cnt" class="btn">1111</button>
<button class="btn">2222</button>
<button class="btn">3333</button>
<div class="page-coat">
</div>
</body>
js代码封装如下:
var eles = document.querySelectorAll('.btn') //类数组 //var eles = document.getElementById('cnt') //单个 function addEvent(ele,type,callback){ if(!ele){ return false }; if(!ele.length){ if(ele.addEventListener){ ele.addEventListener(type,callback,false) return true; }else if(ele.attachEvent){ ele['e'+type+callback] = callback; ele[type+callback] = function(){ ele['e'+type+callback](window.event) }; ele.attachEvent('on'+type,ele[type+callback]) return true } return false }else{ for(var i=0;i<ele.length;i++){ eventBody(i) } } //处理类数组元素同时绑定事件方法 function eventBody(i){ if(ele[i].addEventListener){ ele[i].addEventListener(type,callback,false); }else if(ele[i].attachEvent){ ele[i]['e'+type+callback] = callback; ele[i][type+callback] = function(){ ele[i]['e'+type+callback](window.event) } ele[i].attachEvent('on'+type,ele[i][type+callback]) } } } function func1(){ alert(this.innerText) }
//使用方法 addEvent(eles,'click',func1)
这样就解决了解决了上面提到的addEventListener和attachEvent的区别问题。
注意：1、this指向的知识，以上巧妙运用了this指向调用这个函数的对象（比如ele），来保证在IE浏览器中，this指向调用次事件的元素
2、闭包的知识，把for循环的每个 i 值，通过闭包保存，如果是ES6，可以用let,就更方便了
以上目的为了讨论学习，有不完善的地方希望大家原谅，并提出更好的方法，谢谢
欢迎加入大前端交流群！群号：277942610，VIP新群