细谈addEventListener

为啥要用addEventListener？

分析一下html代码

window.onload = function(){
    var box = document.getElementById("box");
    box.onclick = function(){
        console.log("我是box1");
    }
    box.onclick = function(){
        box.style.fontSize = "18px";
        console.log("我是box2");
    }
}
　　　　　运行结果：“我是box2”

原因就是很简单，第二个onclick事件把第一个onclick事件给覆盖了。虽然大部分时候，我们用on可以解决，但是如果要有增加多个相同的事情，on肯定就实现不了。对此就引入今天的主角---addEventListener，多次绑定同一个时间，切不会覆盖。

修改一下上面代码

window.onload = function(){
    var box = document.getElementById("box");
    box.addEventListener("click",function(){
        console.log("我是box1");
    })
    box.addEventListener("click",function(){
        console.log("我是box2");
    })
}
　　　　运行结果：我是box1
　　　　　　　　　我是box2

addEventListener总共有三个参数，第一个参数填写的是事件名称，记得不需要加on，第二个参数是函数方法，第三个参数是捕获或者冒泡的时候处理，第三个参数在大部分情况下都不需要填写，默认为false。（true--捕获，false--冒泡）

第三个参数

分别给body和box添加点击事件

box.addEventListener("click",function(){
    console.log("box");
})    //冒泡

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　child
　　　　　　　　box

默认情况事件是按照事件冒泡的执行顺序进行的。

若参数为true

box.addEventListener("click",function(){
    console.log("box");
},true)    //捕获

child.addEventListener("click",function(){
    console.log("child");
})
　　执行的结果：
　　　　　　　　box
　　　　　　　　child

移除事件

一般的onclick事件通过

box.onclick =null;

赋予为空值，就能正常移除事件了。

addEcentListener需要使用的是removeEventListener

box.addEventListener("click",function(){
    console.log("box");
}) 
box.removeEventListener("click",function(){
    console.log("box");
})

注意：removeEventListener参数与addEcentListener必须是一致。

addEcentListener不支持IE6，IE7，IE8

所以到了IE，我们就用attachEvent方法

        <a id="xc">点击</a>
        <script type="text/javascript">
                function handler(e){
                        e=e||window.event;
                        var _this=e.srcElement||e.target;
                        alert(_this.innerHTML);
                }
                var object=document.getElementById('xc');
                object.attachEvent('onclick',handler);
        </script>