详解EventTarget.addEventListener事件注册方法

EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。 事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象 (比如 XMLHttpRequest)。

addEventListener()的工作原理是将实现EventListener的函数或对象添加到调用它的EventTarget上的指定事件类型的事件侦听器列表中。

语法

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

参数

• type

表示监听事件类型的字符串。

• listener

当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数，我们一般是传入一个函数，也就是我们的回调函数。

• options 可选

这是一个指定有关listener属性的可选参数对象。可用的选项如下：

1. capture:  Boolean，为true时表示事件捕获，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。除此之外的所有事件绑定均为事件冒泡。
2. once:  Boolean，表示 listener在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
3. passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。
4.  mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，这是个 Boolean，表示 listener 被添加到 system group。

• useCapture  可选

Boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。 当useCapture(设为true) 时，沿着DOM树向上冒泡的事件，不会触发listener。当一个元素嵌套了另一个元素，并且两个元素都对同一事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。进一步的解释可以查看 事件流 及 JavaScript Event order 文档。 如果没有指定， useCapture 默认为 false 。 

• 返回值

返回的是undefined。

示例

添加一个简单的监听器

下面这个例子用来展示如何使用 addEventListener() 监听鼠标点击一个元素：

<table id="outside">    
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

// 改变t2的函数
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// 为table添加事件监听器
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

在上个例子中，modifyText() 是一个 click 事件的监听器，通过使用addEventListenter()注册到table对象上。在表格中任何位置单击都会触发事件并执行modifyText()。

结果