addEventListener()

本文参考了《JavaScript权威指南》

在除IE8及之前版本之外的所有浏览器都支持的标准事件模型中，任何能称为时间目标的对象——这些对象包括Window对象、Document对象和所有文档元素都定义了一个叫addEventListener()的方法。

使用这个方法可以为事件目标注册事件处理程序。addEventListener()接受三个参数：第一个是要注册处理程序的事件类型，这个事件类型（或名字）是字符串，但它不应该包括用于设置事件处理程序属性的前缀“on”。第二个参数是当指定类型的事件发生时应该调用的函数。最后一个人参数是布尔值。通常情况下，会给这个参数传递false。如果相反传递了true，那么函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用。

下面这段代码在<button>元素上注册了click事件的两个处理程序。注意所用两个技术之间的不同：

<button id = "myButton"> 你敢动我一下试试！ </button>
    <script>
    var b = document.getElementById("myButton");
    b.onclick = function () {alert("好小子，真敢点啊")};
    b.addEventListener("click",function () {alert("放学之后别走");},false);

    //运行结果
    //好小子，真敢点啊
    //放学之后别走
    </script>

onclick()方法与addEventListener()方法的区别如下：

当一个dom节点绑定多个onclick的时候，后面的onclick会覆盖前面的onclick。如下代码

 此时网页中只会弹出第二个事件，不会弹出第一个事件。

<button id = "myButton"> 你敢动我一下试试！ </button>
    <script>
    var b = document.getElementById("myButton");
    b.onclick = function () {alert("第一个onclick事件！")};
    b.onclick = function () {alert("第二个onclick事件！")};

    // 运行结果
    // 第二个onclick事件！
    </script>

  

addEventListener()方法绑定多个事件时，每一个事件都能显示出来。

<button id = "myButton"> 你敢动我一下试试！ </button>
<script>
    var b = document.getElementById("myButton");
    b.addEventListener("click",function () {alert("第一个addEventListener事件！"); 
    },false);
    b.addEventListener("click",function () {alert("第二个addEventListener事件！"); 
    },false);

    // 运行结果
    // 第一个addEventListener事件！
    // 第二个addEventListener事件！
    </script>