深入理解EventTarget.addEventListener()

原文出处：MDN:https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener

========================

概述

addEventListener()在一个被调用的单一的目标上注册单一的监听事件，监听事件可以是一个文档上的元素,document本身,window对象, 或者其它支持events的对象（例如：XMLHttpRequest）

语法

target.addEventListener(type,function,boolean)

type ：代表监听的事件类型的字符串（即事件名）

function ：代表事件处理的执行函数

boolean ：一个布尔值，true表示在捕获节点调用事件处理程序，false表示在冒泡节点调用处理程序。或者说是确定事件是作为一个向下级联(true)还是一个向上冒泡(false)的事件。

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，这样可以最大限度地兼容各种浏览器。最好只在需要在是时间到达目标之前截获它的时候将事件处理程序添加到捕获阶段。如果不是特别需要，我们不建议在事件捕获阶段注册事件处理程序。

例子

添加一个简单的监听器

HTML

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

JS

// Function to change the content of t2
function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to t
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);