有关于addEventListener以及removeEventListener的相关问题

之前在编写js代码时经常容易爆出 cannot read property "....." of null 这种叫“捕获类型错误”，一般往往是因为编写人员粗心大意捕获错了对象所导致的，或是在捕获时类型错误。

addEventListener主要解决了js中需要触发多个函数而被创造出来的，
其中包含三个参数 addEventListener( “触发事件”,”需要运行的函数名”,”是否需要阻止冒泡 (默认为阻止冒泡事件)”)

<div id="clicks">请点击我</div>

<style>
    #clicks{
          width: 200px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          text-align: center;
          margin: 0 auto;
          border: 1px red solid;
      }
</style>

<script>
    var y=document.getElementById("clicks");
    y.addEventListener("click",fun);
    y.addEventListener("click",funs);

    function fun(){
        alert("Hello World!")
    }
    function funs(){
        alert("Hello William.Yao")
    }
</script>

这里需要注意的是addEventListener中的触发函数不可加括号，否则就会失效。由于只能写触发函数的函数名，因此如果需要传参就需要用到bind( )事件（IE6、7、8不支持）具体请详见bind、call、apply的详细介绍

<script>
    var y=document.getElementById("clicks");
    y.addEventListener("click",fun.bind());
    y.addEventListener("click",fun.bind());

    function fun(){
        alert("Hello World!")
    }
    function funs(){
        alert("Hello William.Yao")
    }
</script>

addEventListener在IE中会出现不被支持的现象，因此我们需要做一些兼容性处理：

var y = document.getElementById("clicks");

if( y.addEventListener){ //所有主流浏览器，除了 IE 8 及更早 IE版本

    y.addEventListener("click",fun); 

}else if( y.attachEvent){ // IE 8 及更早 IE 版本
    y.attachEvent("onclick",fun);
}

removeEventListener()

此方法旨在移除添加到addEventListener( )中的触发事件。

<style>
    #myDIV 
    {
        background-color: coral;
        border: 1px solid;
        padding: 50px;
        color: white;
    }
</style>

<div id="myDIV"> div 元素添加了  onmousemove 事件句柄，在你移动鼠标时会显示随机数。
    <p>点击按钮移除 DIV 的事件句柄。</p>
    <button onclick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>

<script>
    document.getElementById("myDIV").addEventListener("mousemove", myFunction);
    function myFunction() 
    {
          document.getElementById("demo").innerHTML = Math.random();
    }
          function removeHandler() 
    {
          document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
    }
</script>

IE兼容性写法：

var x = document.getElementById("myDIV");
if (x.removeEventListener) {                   // // 所有浏览器，除了 IE 8 及更早IE版本
    x.removeEventListener("mousemove", myFunction);
} else if (x.detachEvent) {                   // IE 8 及更早IE版本
    x.detachEvent("onmousemove", myFunction);
}