探索JavaScript事件流：DOM中的神奇旅程

傷城~ 2024-04-25 20:14 5阅读 0赞

![ab558ff3f5e347b4afb5748d1c26391a.gif][]

**🎬 江城开朗的豌豆**：[个人主页][Link 1]

**🔥 个人专栏** :[《 VUE 》][VUE] [《 javaScript 》][javaScript]

**⛺️ 生活的理想，就是为了理想的生活 !**

![在这里插入图片描述][7a8de4d12e20434eb29590366872b046.gif_pic_center]

**目录**

引言

1. 事件流的发展流程

1.1 传统的DOM0级事件

1.2 DOM2级事件和addEventListener方法

1.3 W3C DOM3级事件

1.4 React与Virtual DOM

2. 事件流的属性

2.1 事件捕获阶段

2.2 目标阶段

2.3 事件冒泡阶段

2.4 事件对象

3. 事件流的应用场景

3.1 事件处理

3.2 事件代理

3.3 事件委托

4. 示例代码

--------------------

### 引言 ###

> JavaScript中的事件流是一种机制，用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景，并提供一些代码示例和引用资料，帮助读者深入理解并应用这一重要的前端技术。

### 1. 事件流的发展流程 ###

事件流在前端的发展过程中经历了一些变化和演进。下面简要介绍了事件流的发展历程：

#### 1.1 传统的DOM0级事件 ####

> 在早期的JavaScript中，事件处理是通过在DOM元素上直接定义事件处理属性来实现的，称为DOM0级事件。例如，可以通过为按钮元素的`onclick`属性赋值一个函数来定义点击事件的处理程序。

const button = document.getElementById('myButton');
    button.onclick = function() {
      console.log('按钮被点击');
    };

这种方式简单直接，但是有一个缺点是无法同时为一个元素的同一个事件类型添加多个处理程序。

#### 1.2 DOM2级事件和addEventListener方法 ####

> 随着DOM2级事件的引入，新增了`addEventListener`方法，提供了更强大和灵活的事件处理能力。`addEventListener`方法允许为一个元素的同一个事件类型添加多个处理程序，并且可以控制事件的捕获阶段。

const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
      console.log('按钮被点击');
    });

> 通过`addEventListener`方法，可以在一个元素上同时添加多个处理程序，而且可以使用`removeEventListener`方法移除指定的处理程序。

#### 1.3 W3C DOM3级事件 ####

> W3C DOM3级事件进一步扩展了事件的类型和属性，引入了更多的事件类型和特性，以满足不断增长的前端开发需求。DOM3级事件规范定义了新的事件类型，如滚动事件、触摸事件、过渡事件等，以及一些新的事件属性和方法，提供更丰富的事件处理能力。

const element = document.getElementById('myElement');
    element.addEventListener('scroll', function(event) {
      console.log('元素滚动事件');
    });

DOM3级事件的引入丰富了事件处理的能力，使得开发者可以更灵活地响应各种类型的事件。

#### 1.4 React与Virtual DOM ####

> 随着React等前端框架的出现，事件处理机制也发生了一些变化。React通过Virtual DOM的概念，将事件处理从直接操作DOM转移到组件层面进行管理。React利用了合成事件（
> 
> SyntheticEvent）来处理事件，实现了跨浏览器的一致性和性能优化。
> 
> 在React中，事件处理程序是通过特定的语法和属性绑定到组件的，而不是直接操作DOM元素。

class MyComponent extends React.Component {
      handleClick() {
        console.log('按钮被点击');
      }
    
      render() {
        return <button onClick={this.handleClick}>点击按钮</button>;
      }
    }

通过使用合成事件，React能够更高效地管理事件处理，并提供了更好的性能和开发体验。

### 2. 事件流的属性 ###

> 事件流涉及到三个主要的概念：事件捕获阶段、目标阶段和事件冒泡阶段。了解这些阶段和相关的属性对于理解事件流的机制至关重要。

#### 2.1 事件捕获阶段 ####

> 事件捕获阶段是事件流的第一个阶段，从根节点开始向下传播到目标元素。在事件捕获阶段中，事件依次经过每个父元素，直到达到目标元素。
> 
> 在事件捕获阶段，可以使用`addEventListener`的第三个参数指定事件处理程序在捕获阶段中执行。

element.addEventListener('click', handler, true);

#### 2.2 目标阶段 ####

目标阶段是事件流的第二个阶段，事件到达目标元素后被触发执行事件处理程序。

#### 2.3 事件冒泡阶段 ####

> 事件冒泡阶段是事件流的最后一个阶段，事件从目标元素开始向上冒泡，依次经过每个父元素，直到达到根节点。
> 
> 在事件冒泡阶段，可以使用`addEventListener`的第三个参数设置为`false`或省略来指定事件处理程序在冒泡阶段中执行（默认值）。

element.addEventListener('click', handler, false);
    // 或
    element.addEventListener('click', handler);

#### 2.4 事件对象 ####

> 在事件处理程序中，可以通过事件对象访问和操作相关的事件信息。事件对象提供了一些属性和方法，可以获取事件的类型、目标元素、鼠标坐标等信息。
> 
> 例如，可以通过事件对象的`type`属性获取事件类型：

element.addEventListener('click', function(event) {
      console.log(event.type); // 输出 'click'
    });

### 3. 事件流的应用场景 ###

事件流在前端开发中具有广泛的应用场景，下面介绍几个常见的应用场景：

#### 3.1 事件处理 ####

事件流提供了一种机制，用于处理和响应用户的交互操作。通过在目标元素上注册事件处理程序，可以捕获和处理用户触发的事件，实现交互功能。

例如，通过在按钮上注册`click`事件处理程序，可以

在按钮被点击时执行相应的代码逻辑。

const button = document.getElementById('myButton');
    button.addEventListener('click', function(event) {
      console.log('按钮被点击');
    });

#### 3.2 事件代理 ####

> 事件代理（Event Delegation）是一种常见的优化技术，用于处理大量具有相似行为的子元素事件。通过在父元素上注册事件处理程序，可以利用事件冒泡机制，统一管理子元素的事件处理。
> 
> 例如，可以在父元素上注册`click`事件处理程序，根据触发事件的具体子元素进行不同的操作。

const list = document.getElementById('myList');
    list.addEventListener('click', function(event) {
      if (event.target.tagName === 'LI') {
        console.log('项目被点击');
      }
    });

#### 3.3 事件委托 ####

事件委托是一种通过将事件处理委托给父元素来提高性能和简化代码的技术。它利用事件冒泡机制，在父元素上注册一个事件处理程序，处理多个子元素的相同事件。

例如，可以在父元素上注册`click`事件处理程序，根据触发事件的子元素的不同类别执行不同的操作。

### 4. 示例代码 ###

下面是一些示例代码，演示了事件流的应用和相关的属性：

<button id="myButton">点击按钮</button>
    <ul id="myList">
      <li>项目1</li>
      <li>项目2</li>
      <li>项目3</li>
    </ul>
    <div id="myContainer">
      <button class="button">按钮</button>
      <a href="#" class="link">链接</a>
    </div>
    
    <script>
      // 事件处理示例
      const button = document.getElementById('myButton');
      button.addEventListener('click', function(event) {
        console.log('按钮被点击');
      });
    
      // 事件代理示例
      const list = document.getElementById('myList');
      list.addEventListener('click', function(event) {
        if (event.target.tagName === 'LI') {
          console.log('项目被点击');
        }
      });
    
      // 事件委托示例
      const container = document.getElementById('myContainer');
      container.addEventListener('click', function(event) {
        if (event.target.classList.contains('button')) {
          console.log('按钮被点击');
        } else if (event.target.classList.contains('link')) {
          console.log('链接被点击');
        }
      });
    </script>

> 请大家不吝赐教,在下方评论或者私信我,十分感谢🙏🙏🙏.
> 
> ✅ 认为我某个部分的设计过于繁琐,有更加简单或者更高逼格的封装方式
> 
> ✅ 认为我部分代码过于老旧,可以提供新的API或最新语法
> 
> ✅ 对于文章中部分内容不理解
> 
> ✅ 解答我文章中一些疑问
> 
> ✅ 认为某些交互,功能需要优化,发现BUG
> 
> ✅ 想要添加新功能,对于整体的设计,外观有更好的建议
> 
> 最后感谢各位的耐心观看，既然都到这了，点个 👍赞再走吧

![8d9fa110b88041dab8b09e4d66953a91.jpeg][]

[ab558ff3f5e347b4afb5748d1c26391a.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/09a714540381442ba6b5836908fa2c00.gif
[Link 1]: https://blog.csdn.net/qq_48652579?type=blog
[VUE]: https://blog.csdn.net/qq_48652579/category_12294321.html
[javaScript]: https://blog.csdn.net/qq_48652579/category_12275821.html
[7a8de4d12e20434eb29590366872b046.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/8002006e6475493fb0ad3b31d96dd522.gif
[8d9fa110b88041dab8b09e4d66953a91.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/25/6131b154528b43d5a0aca6269d539516.jpeg