JavaScript HTML DOM 事件监听器

addEventListener() 方法为指定元素指定事件处理程序。

addEventListener() 方法为元素附加事件处理程序而不会覆盖已有的事件处理程序。

你可以向一个元素添加多个事件处理程序。

你可以向一个元素添加多个相同类型的事件处理程序，例如两个 “click” 事件。

你可以向任何 DOM 对象添加事件处理程序而非仅仅 HTML 元素，例如 window 对象。

addEventListener() 方法使我们更容易控制事件如何对冒泡作出反应。

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器。

你可以通过使用 removeEventListener() 方法轻松地删除事件监听器。

示例：

语法：
element.addEventListener(event, function, useCapture);

向元素添加事件处理程序
示例：
当用户点击某个元素时提示 “Hello World!”：
element.addEventListener(“click”, function(){ alert(“Hello World!”); });
您也可以引用外部“命名”函数：

示例：
当用户点击某个元素时提示 “Hello World!”：

element.addEventListener(“click”, myFunction);

function myFunction() {
alert (“Hello World!”);
}

向相同元素添加多个事件处理程序
addEventListener() 方法允许您向相同元素添加多个事件，同时不覆盖已有事件：

实例
element.addEventListener(“click”, myFunction);
element.addEventListener(“click”, mySecondFunction);

您能够向相同元素添加不同类型的事件：
实例：

向 Window 对象添加事件处理程序
addEventListener() 允许您将事件监听器添加到任何 HTML DOM 对象上，比如 HTML 元素、HTML 对象、window 对象或其他支持事件的对象，比如 xmlHttpRequest 对象。

实例
添加当用户调整窗口大小时触发的事件监听器：

传递参数
当传递参数值时，请以参数形式使用调用指定函数的“匿名函数”：

实例
element.addEventListener(“click”, function(){ myFunction(p1, p2); });

removeEventListener() 方法
removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序：

实例
element.removeEventListener(“mousemove”, myFunction);