我们平常使用 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); }); }
原文：https://www.cnblogs.com/dawn2309/p/12499562.html