IE8及以下浏览器不支持addEventListener()方法,只能使用onXXX()方法绑定事件。
onXXX()方法相对于addEventListener()的缺点主要有以下3个:
1.onXXX()不可以一个事件做多个方法,addEventListener()可以针对一个对象的一个事件做多个方法,并且可以选择中间停止某些方法,以onclick()和addEventListener("click",clickHandler)为例:
onclick():
btn.onclick=function(){ console.log("click1"); } btn.onclick=function(){ console.log("click2"); }
此时如果单击btn只会打印"click2","click1"被覆盖;
btn.addEventListener("click",clickHnadler):
btn.addEventListener("click",clickHandler1); btn.addEventListener("click",clickHandler2); function clickHandler1(){ console.log("click1"); //btn.removeEventListener("click",clickHandler1); 单击第一次打印,第二次单击及以后都不打印 } function clickHandler2(){ console.log("click2"); }
第一次单击btn的时候既打印"click1"也打印"click2",当第二次单击btn的时候只打印"click2",原因是事件clickHandler1的侦听器被remove掉了,所以addEventListener()方法更加自由;
2.onXXX不能设置捕获和冒泡阶段哪个优先,但addEventListener()可以设置捕获和冒泡的优先以及是否选择确定一个被另一个覆盖,以onclick()方法和addEventListener("click",clickHandler)为例:
btn.addEventListener("click",clickHandler,true); //第3个参数表示是否捕获阶段触发,即如果设置为true,则该事件的优先级比冒泡优先级高 function clickHandler(e){ console.log("click"); if(!e.cancleBubble=true){ //兼容IE8以下 e.stopPropagation; //阻止继续执行事件的冒泡阶段 }else{ e.cancleBubble=true; } }
3.onXXX事件没有自由度,addEventListener()可以侦听自定义事件:
btn.addEventListener("jiaohu",jiaohuHandler); //自定义一个"交互"事件,注册jiaohuHandler函数 var event = new Event("jiaohu"); //初始化交互事件 btn.dispatchEvent("jiaohu"); //抛发事件 console.log(event); function jiaohuHandler(e){ console.log(e); }