onXXX方法和addEventListener方法对比

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);
}