DOM事件处理程序

事件处理程序

事件意味着用户或浏览器执行的某种动作。比如，单击(click)、加载(load)、鼠标悬停(mouseover)。为响应事件而调用的函数被称为事件处理程序（或事件监听器）。事件处理程序的名字以"on"开头，因此 click 事件的处理程序叫作 onclick，而 load 事件的处理程序叫作 onload。有很多方式可以指定事件处理程序。

1.HTML 事件处理程序

​ 特定元素支持的每个事件都可以使用事件处理程序的名字以 HTML 属性的形式来指定。此时属性的值必须是能够执行的 JavaScript 代码。例如，要在按钮被点击时执行某些 JavaScript 代码，可以使用以下 HTML 属性：

<button onclick="console.log('Clicked')">点我啊</button>

​

点击这个按钮后，控制台会输出一条消息。这种交互能力是通过为 onclick 属性指定 JavaScript代码值来实现的。注意，因为属性的值是 JavaScript 代码，所以不能在未经转义的情况下使用 HTML 语法字符，比如和号（&）、双引号（"）、小于号（<）和大于号（>）。此时，为了避免使用 HTML 实体，可以使用单引号代替双引号。如果确实需要使用双引号，则要把代码改成下面这样：

<button onclick="console.log(&quot;Clicked&quot;)">点我啊</button>

在 HTML 中定义的事件处理程序可以包含精确的动作指令，也可以调用在页面其他地方定义的方法。

<!-- 需要加() -->
<button onclick="showMsg()">点我啊</button>
<script>
  function showMsg() {
    console.log('Hello Wolrd!');
  }
</script>

在这个函数中，this 值相当于事件的目标元素，如下面的例子所示：

<button onclick="this.innerHTML = '我被改变了'">点我啊</button>

2.DOM0 事件处理程序

​ 在 JavaScript 中指定事件处理程序的传统方式是把一个函数赋值给（DOM 元素的）一个事件处理程序属性。这也是在第四代 Web 浏览器中开始支持的事件处理程序赋值方法，直到现在所有现代浏览器仍然都支持此方法，主要原因是简单。要使用 JavaScript 指定事件处理程序，必须先取得要操作对象的引用。每个元素（包括 window 和 document）都有通常小写的事件处理程序属性，比如 onclick。只要把这个属性赋值为一个函数即可：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    console.log('我被点击了');
  }
</script>

​ 这里先从文档中取得按钮，然后给它的 onclick 事件处理程序赋值一个函数。注意，前面的代码在运行之后才会给事件处理程序赋值。因此如果在页面中上面的代码出现在按钮之后，则有可能出现用户点击按钮没有反应的情况。

​ 像这样使用 DOM0 方式为事件处理程序赋值时，所赋函数被视为元素的方法。因此，事件处理程序会在元素的作用域中运行，即 this 等于元素。下面的例子演示了使用 this 引用元素本身：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById('btn');
  btn.onclick = function () {
    console.log('我被点击了');
    console.log(this.id); //btn
  }
</script>

​ 点击按钮，这段代码会显示元素的 ID。这个 ID 是通过 this.id 获取的。不仅仅是 id，在事件处理程序里通过 this 可以访问元素的任何属性和方法。以这种方式添加事件处理程序是注册在事件流的冒泡阶段的。

通过将事件处理程序属性的值设置为 null，可以移除通过 DOM0 方式添加的事件处理程序，如下面的例子所示：

btn.onclick = null; // 移除事件处理程序

把事件处理程序设置为 null，再点击按钮就不会执行任何操作了。

注意：

如果事件处理程序是在 HTML 中指定的，则 onclick 属性的值是一个包装相应HTML 事件处理程序属性值的函数。这些事件处理程序也可以通过在 JavaScript 中将相应属性设置为 null 来移除。

3.DOM2 事件处理程序

DOM2 Events 为事件处理程序的赋值和移除定义了两个方法：

addEventListener()和removeEventListener()。

这两个方法暴露在所有 DOM 节点上，它们接收 3 个参数：事件名、事件处理函数和一个布尔值，true 表示在捕获阶段调用事件处理程序，false（默认值）表示在冒泡阶段调用事件处理程序。

addEventListener()

仍以给按钮添加 click 事件处理程序为例，可以这样写：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
</script>

以上代码为按钮添加了会在事件冒泡阶段触发的 onclick 事件处理程序（因为最后一个参数值为false）。与 DOM0 方式类似，这个事件处理程序同样在被附加到的元素的作用域中运行。使用 DOM2方式的主要优势是可以为同一个事件添加多个事件处理程序。来看下面的例子：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
  btn.addEventListener("click", function () {
    console.log(this.id); // btn
  });
</script>

这里给按钮添加了两个事件处理程序。多个事件处理程序以添加顺序来触发，因此前面的代码会先打印’我被点击了’，然后显示元素ID。

removeEventListener()

通过 addEventListener()添加的事件处理程序只能使用 removeEventListener()并传入与添加时同样的参数来移除。这意味着使用 addEventListener()添加的匿名函数无法移除，如下面的例子所示：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  btn.addEventListener("click", function () {
    console.log('我被点击了');
  }, false);
  // 移除
  btn.removeEventListener("click", function () {
    console.log(this.id); //没有效果
  })
</script>

这个例子通过 addEventListener()添加了一个匿名函数作为事件处理程序。然后，又以看起来相同的参数调用了 removeEventListener()。但实际上，第二个参数与传给 addEventListener()的完全不是一回事。传给 removeEventListener()的事件处理函数必须与传给 addEventListener()的是同一个，如下面的例子所示：

<button id='btn'>点我啊</button>
<script>
  var btn = document.getElementById("btn");
  // 新增一个方法
  var handler = function () {
    console.log(this.id);
  }
  btn.addEventListener("click", handler, false);
  // 移除
  btn.removeEventListener("click", handler, false); // 有效果
</script>

这个例子有效，因为调用 addEventListener()和 removeEventListener()时传入的是同一个函数。大多数情况下，事件处理程序会被添加到事件流的冒泡阶段，主要原因是跨浏览器兼容性好。把事件处理程序注册到捕获阶段通常用于在事件到达其指定目标之前拦截事件。如果不需要拦截，则不要使用事件捕获。