JavaScript事件学习小结（一）事件流

前言

JavaScript 是一种基于事件驱动的编程语言，而事件机制也是 JavaScript 中非常重要的一部分。本篇笔记介绍的是事件流的相关知识，对于理解事件机制起着重要的作用。

什么是事件流？

当一个事件发生时，JavaScript 引擎会按照一定的顺序处理事件。这个顺序就是事件流。

事件流分为两种：冒泡流和捕获流。

冒泡流

冒泡流是指当一个事件触发时，首先执行最内层元素上的事件处理程序，然后逐步向外层元素冒泡，直到最外层元素。

例如，我们有以下 HTML 结构：

<div>
  <p>text</p>
</div>

当我们在 <p> 元素上绑定一个 click 事件，且点击了 <p> 元素，事件触发顺序如下：

最先执行 <p> 元素上的 click 事件处理程序。
然后向外层元素 <div> 冒泡，执行 <div> 元素上的 click 事件处理程序。

捕获流

捕获流是指当一个事件触发时，首先执行最外层元素上的事件处理程序，然后逐渐向里层元素捕获，直到最内层元素。

例如，我们有以下 HTML 结构：

<div>
  <p>text</p>
</div>

当我们在 <p> 元素上绑定一个 click 事件，且点击了 <p> 元素，事件触发顺序如下：

最先执行 <div> 元素上的 click 事件处理程序。
然后向内层元素 <p> 捕获，执行 <p> 元素上的 click 事件处理程序。

事件流总结

事件流有两种：冒泡流和捕获流。冒泡流是从内向外执行事件处理程序，而捕获流则相反，是从外向内执行事件处理程序。

示例说明

示例一

下面是一个简单的 HTML 页面：

<!DOCTYPE html>
<html>
  <head>
    <title>Event Flow Demo</title>
  </head>
  <body>
    <div id="outerDiv">
      <div id="innerDiv">
        <button id="myButton">Click me!</button>
      </div>
    </div>
    <script>
      document.getElementById("outerDiv").addEventListener(
        "click",
        function (event) {
          console.log("outerDiv clicked");
        },
        false
      );

      document.getElementById("innerDiv").addEventListener(
        "click",
        function (event) {
          console.log("innerDiv clicked");
        },
        false
      );

      document.getElementById("myButton").addEventListener(
        "click",
        function (event) {
          console.log("button clicked");
        },
        false
      );
    </script>
  </body>
</html>

在示例中，我们绑定了三个元素的 click 事件，分别是外部 div 元素、内部 div 元素和按钮元素。

当我们点击按钮时，事件触发的顺序如下：

首先执行按钮元素上的 click 事件处理程序，输出 button clicked。
然后向外层元素 <div id="innerDiv"> 冒泡，执行 <div id="innerDiv"> 元素上的 click 事件处理程序，输出 innerDiv clicked。
最后向外层元素 <div id="outerDiv"> 冒泡，执行 <div id="outerDiv"> 元素上的 click 事件处理程序，输出 outerDiv clicked。

示例二

下面是一个在 ul 元素上进行事件委托的例子：

<!DOCTYPE html>
<html>
  <head>
    <title>Event Flow Demo</title>
  </head>
  <body>
    <ul id="myList">
      <li>一</li>
      <li>二</li>
      <li>三</li>
      <li>四</li>
      <li>五</li>
    </ul>
    <script>
      var myList = document.getElementById("myList");
      myList.addEventListener("click", function (event) {
        if (event.target.tagName === "LI") {
          console.log(event.target.innerHTML);
        }
      });
    </script>
  </body>
</html>

在示例中，我们绑定了 ul 元素上的 click 事件，而我们只关心对 li 元素的点击事件。因此，我们通过在 ul 上进行事件委托，只在 ul 元素上绑定一个事件处理程序，通过判断 event.target 来确定触发事件的元素是否为 li 元素。

当我们点击 li 元素时，事件触发的顺序如下：