javascript事件侦听器是什么东西，用来干哈子

平常使用 on+事件类型绑定事件有缺陷：

btn.onclick=function(){
    console.log(456);
     }

现在需要给这个事件再绑定一次

btn.onclick=function(){
    console.log(456);
     }

同类型的事件，只能绑定一次。因为直接赋值会将上面的值覆盖掉

解决这个问题？ - 换个绑定方式，再绑定一次
有一个事件侦听器，可以解决咱们的问题

事件侦听器的语法：
元素.addEventListener(“事件类型不加on”,事件处理函数,事件是否在捕获阶段执行);
第三个参数是可选项，默认值是false

 btn.addEventListener("click",function(){
    console.log(123);
},false);// 最后一个参数表示是否在捕获阶段执行

事件侦听器就相当于换了个方式绑定事件

事件侦听器在低版本IE中有兼容问题
针对低版本ie的写法： 元素.attachEvent(“on加事件类型”,处理函数);
没有第三个参数 - 在低版本IE中，不存在捕获阶段
IE中只有目标阶段和冒泡阶段

封装函数 - 通用的绑定事件的方法

function bind(ele,type,handler){
    if(ele.addEventListener){ // 如果有 - true ，如果没有 undefined - false
        ele.addEventListener(type,handler);
    }else if(ele.attachEvent){
        ele.attachEvent("on"+type,handler);
    }else{
        ele.onclick=handler;
    }
}
bind(big,"click",fn);
function fn(){
    console.log(123);
}
function fun(){
    console.log(456);
}
bind(big,"click",fun);

事件侦听器就是为了解决同类型事件绑定的缺陷，感觉有了它，猿叔叔再也不会为事件绑定而烦恼了