原生javascript 的分享：事件侦听器

我们平常使用 on+事件类型绑定事件，这种绑定是有缺陷的，如代码：

btn.onclick=function(){

    console.log(123);

}

btn.onclick=function(){

    console.log(456);

}

 

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

456

 

 

有一个事件侦听器，可以解决这个的问题：

事件侦听器的语法：元素.addEventListener("事件类型不加on",事件处理函数,事件是否在捕获阶段执行);

第三个参数是可选项，默认值是false

如代码：

btn.addEventListener("click",function(){

    console.log(123);

},false);

btn.addEventListener("click",function(){

    console.log(456);

},false);

这样输出的就是：

123

456

 

 

事件侦听器在低版本IE中有兼容问题

针对低版本ie的写法：  

 

元素.attachEvent("on加事件类型",处理函数);

 

没有第三个参数 - 在低版本IE中，不存在捕获阶段

IE中只有目标阶段和冒泡阶段

 

侦听器的兼容写法：

//兼容写法：
if(btn.addEventListener){
    btn.addEventListener("click",function(){
        console.log(123);
    });
    btn.addEventListener("click",function(){
        console.log(456);
    });
}else{
    btn.attachEvent("onclick",function(){
        console.log(123);
    });
    btn.attachEvent("onclick",function(){
        console.log(456);
    });
}