原生JS跨浏览器事件封装处理

引子：用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新群