【JS基础】DOM 事件流与事件处理程序事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以用侦听器（或处理程序）来

本文参考《JS高级程序设计（第3版）》

事件，就是文档或浏览器窗口发生的一些特定的交互瞬间。可以用侦听器（或处理程序）来预订事件，以便事件发生时执行相应的代码。

DOM 事件流

“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Event Bubbling Example</title>
</head>
<body>
  <div id="myDiv">Click me</div>
</body>
</html>

在上述代码中，单击<div>元素会按顺序触发事件：

捕获阶段：1. Document 2. Element html 3. Element body
处于目标阶段：4. Element div (事件在此发生)
冒泡阶段： 5. Element body 6. Element html 7. Document （事件传播回文档）

事件处理程序

响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以"on"开头，所以click事件的事件处理程序就是onclick。

DOM2 级事件处理程序

“DOM2 级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener() 所有DOM节点都包含这两个方法，都接受三个参数：

要处理的事件名
作为事件处理程序的函数
一个布尔值：true表示在捕获阶段调用事件处理程序；false表示在冒泡阶段调用事件处理程序

大多数情况下，都是将事件处理程序添加到事件流的冒泡阶段，以最大限度兼容各种浏览器。

`addEventListener()`

// 在按钮上为click事件添加事件处理程序：
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert(this.id);
}, false);

使用DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序，按照添加的顺序触发。

var btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
    alert(this.id);
}, false);

btn.addEventListener("click", function() {
    alert("Hello world!");
}, false);

/* 输出：
myBtn 
Hello world!
*/

`removeEventListener()`

通过addEventListener()添加的事件处理程序只能通过removeEventListener()移除。

需要注意的是添加的匿名函数无法移除，要重写。因为移除方法中的参数匿名function()和添加方法中的是一个完全不同的函数。

  btn.addEventListener("click", function() {
    alert("Hello world!");
  }, false);

// 移除不起作用
  btn.removeEventListener("click", function() {
    alert("Hello world!");
  }, false);

重写如下：

  // 重写
  var handler = function() {
    alert("Hello world!");
  };
  
  btn.addEventListener("click", handler, false);

// 起作用
  btn.removeEventListener("click", handler, false);