监听和处理事件

在介绍如何修改或创建 DOM 之前，我们先简单的学习一下 DOM 事件的处理，因为绝大多数情况下，需要在用户交互的时候修改 DOM，例如用户点击按钮修改某个元素的颜色，或者添加一个新的列表项到列表中。

处理事件共分两步：

• 添加事件监听函数。
• 在监听函数中编写处理代码。

监听事件的方式

监听事件的方式有 3 种：

• 直接在 HTML 中通过事件属性监听，例如 onclick。
• 在 JS 中，直接给 DOM 元素的事件属性，添加监听函数。
• 在 JS 中，调用 DOM 元素的 addEventListener() 方法。我们分别来看一下。

信息

这小节我们会看一下 click 鼠标点击事件的监听和处理方法，更多的事件会在后面小节中再做介绍。

直接在 HTML 中监听事件

这种方式已经不推荐了，它会使 HTML 和 JavaScript 代码紧密耦合，并且让 HTML 代码难以阅读。鉴于有些工作中，可能还是会有这种写法，所以这里介绍一下这种监听和处理事件的方法。

我们以监听 click 鼠标点击事件为例，假设页面上展示了一个 p 元素，文字默认为黑色，在鼠标点击的时候，变成红色。我们可以：

• 给 p 元素设置 onclick 属性，然后值为调用 JavaScript 中的一个函数，例如 changeColor
• 给函数传递 this 进去，这样 p 元素的 DOM 实例就可以通过函数参数访问到。
• 在 changeColor 函数中，我们可以修改 p 元素的 style 属性的 color 的值，来改变它的颜色。

这里具体的事件处理代码先不用关心，知道监听和处理事件的大体过程就可以了。

代码如下（可直接在预览处点击 p 元素试试效果）：

<p id="text" onclick="changeColor(this)">这是一个段落</p>
<script>

function changeColor(p) {
  p.style.color = "red";
}

</script>

预览：

这样，点击 p 元素的时候，就会触发 click 事件，然后调用 changeColor() 函数，执行里边的代码。

或者如果事件监听只有少量的代码，例如上面的例子只有 1 行，那么也可以直接吧它写到 HTML 中，不用单独定义一个函数：

<p id="text" onclick="this.style.color = 'red'">这是一个段落</p>

预览：

这样也是同样的效果。

在 JavaScript 中监听事件

我们也可以在 JavaScript 中获取到 DOM 元素实例之后，给它的事件属性赋值一个函数，来监听事件，例如：

<p id="text">这是一个段落</p>
<script>
  const p = document.getElementById("text");
  p.onclick = function(e) {
    e.target.style.color = 'red'
  }
</script>

预览：

这样也能实现同样的效果。这里注意，通过这种方式注册的事件监听函数，可以接收 事件对象 作为参数，它包含事件触发时的一些信息，例如鼠标的坐标，触发事件的元素等。这里我们通过 e.target 来访问事件触发的元素，也就是 p 元素，来修改它的样式。或者你也可以使用上方获取出来的 p 元素实例，它们两个是等价的。

使用 addEventListener()

这种方式是最推荐的监听事件的方式，调用 DOM 元素的 addEventListener() 方法：

• 第一个参数传递事件名，这里的参数名都不带 "on"。
• 第二个参数传递事件处理函数。

例如：

<p id="text">这是一个段落</p>
<script>
  const p = document.getElementById("text");
  p.addEventListener("click", function(e) {
    e.target.style.color = 'red'
  });
</script>

预览：

使用 addEventListener 的好处是，我们可以给元素添加多个事件监听/处理函数，并且可以给非 DOM 元素添加事件，例如 window 对象，这个我们后面再介绍。