React 中的事件冒泡与捕获

React 事件系统简介

在 React 中，事件处理机制与原生 JavaScript 的事件处理有所不同。React 采用了一种合成事件（SyntheticEvent）机制，这是一个跨浏览器的封装，它模拟了原生 DOM 事件的接口，但提供了更好的兼容性和性能表现。

React 的事件不是直接绑定到真实的 DOM 元素上，而是在文档级别统一监听。当一个事件发生时，React 会根据事件类型和目标元素，找到对应的组件实例，并调用相应的事件处理函数。这种机制使得 React 能够高效地管理事件，并且在虚拟 DOM 树更新时，避免了频繁地添加和移除事件监听器。

事件冒泡（Event Bubbling）

冒泡机制原理

事件冒泡是指当一个元素上的事件被触发时，该事件会从最内层的元素开始，向外层的元素传播，就像气泡从水底往上冒一样。例如，在一个包含多个嵌套元素的 HTML 结构中：

<div id="outer">
  <div id="middle">
    <div id="inner"></div>
  </div>
</div>

如果在 inner 元素上触发了一个点击事件，该事件会首先在 inner 元素上被处理，然后依次传递到 middle 元素和 outer 元素，前提是这些元素都绑定了相应的点击事件处理函数。

React 中事件冒泡示例

在 React 中，我们可以通过以下代码示例来演示事件冒泡：

import React, { Component } from 'react';

class EventBubblingExample extends Component {
  handleInnerClick = () => {
    console.log('Inner div clicked');
  }

  handleMiddleClick = () => {
    console.log('Middle div clicked');
  }

  handleOuterClick = () => {
    console.log('Outer div clicked');
  }

  render() {
    return (
      <div id="outer" onClick={this.handleOuterClick}>
        Outer Div
        <div id="middle" onClick={this.handleMiddleClick}>
          Middle Div
          <div id="inner" onClick={this.handleInnerClick}>
            Inner Div
          </div>
        </div>
      </div>
    );
  }
}

export default EventBubblingExample;

在上述代码中，我们定义了一个 EventBubblingExample 组件，该组件包含三个嵌套的 div 元素，每个 div 都绑定了一个点击事件处理函数。当点击 Inner Div 时，控制台会依次输出 Inner div clicked、Middle div clicked 和 Outer div clicked，这清楚地展示了事件冒泡的过程。

阻止事件冒泡

在某些情况下，我们可能希望阻止事件冒泡，避免事件传播到外层元素。在 React 中，可以通过调用合成事件对象的 stopPropagation 方法来实现。例如，我们修改上述代码，在 inner 元素的点击事件处理函数中阻止事件冒泡：

import React, { Component } from 'react';

class EventBubblingExample extends Component {
  handleInnerClick = (e) => {
    e.stopPropagation();
    console.log('Inner div clicked');
  }

  handleMiddleClick = () => {
    console.log('Middle div clicked');
  }

  handleOuterClick = () => {
    console.log('Outer div clicked');
  }

  render() {
    return (
      <div id="outer" onClick={this.handleOuterClick}>
        Outer Div
        <div id="middle" onClick={this.handleMiddleClick}>
          Middle Div
          <div id="inner" onClick={this.handleInnerClick}>
            Inner Div
          </div>
        </div>
      </div>
    );
  }
}

export default EventBubblingExample;

此时，当点击 Inner Div 时，控制台只会输出 Inner div clicked，因为事件在 inner 元素处被阻止了冒泡，不会继续传播到 middle 和 outer 元素。

事件捕获（Event Capturing）

捕获机制原理

事件捕获与事件冒泡相反，它是从最外层的元素开始，向内层的元素传播。当一个事件发生时，首先会在最外层的元素上触发捕获阶段的事件处理函数，然后依次向内层元素传递，直到到达目标元素。

React 中事件捕获示例

在 React 中，要使用事件捕获，需要在绑定事件时指定 capture 为 true。以下是一个示例代码：

import React, { Component } from 'react';

class EventCapturingExample extends Component {
  handleOuterCapture = () => {
    console.log('Outer div capture');
  }

  handleMiddleCapture = () => {
    console.log('Middle div capture');
  }

  handleInnerCapture = () => {
    console.log('Inner div capture');
  }

  render() {
    return (
      <div id="outer" onClickCapture={this.handleOuterCapture}>
        Outer Div
        <div id="middle" onClickCapture={this.handleMiddleCapture}>
          Middle Div
          <div id="inner" onClickCapture={this.handleInnerCapture}>
            Inner Div
          </div>
        </div>
      </div>
    );
  }
}

export default EventCapturingExample;

在上述代码中，我们为每个 div 元素绑定了捕获阶段的点击事件处理函数。当点击 Inner Div 时，控制台会依次输出 Outer div capture、Middle div capture 和 Inner div capture，展示了事件捕获的过程。

同时使用冒泡和捕获

在 React 中，一个元素可以同时绑定冒泡和捕获阶段的事件处理函数。例如：

import React, { Component } from 'react';

class BubblingAndCapturingExample extends Component {
  handleOuterClick = () => {
    console.log('Outer div click (bubbling)');
  }

  handleOuterCapture = () => {
    console.log('Outer div capture');
  }

  handleInnerClick = () => {
    console.log('Inner div click (bubbling)');
  }

  handleInnerCapture = () => {
    console.log('Inner div capture');
  }

  render() {
    return (
      <div id="outer" onClick={this.handleOuterClick} onClickCapture={this.handleOuterCapture}>
        Outer Div
        <div id="inner" onClick={this.handleInnerClick} onClickCapture={this.handleInnerCapture}>
          Inner Div
        </div>
      </div>
    );
  }
}

export default BubblingAndCapturingExample;

当点击 Inner Div 时，控制台输出的顺序为 Outer div capture、Inner div capture、Inner div click (bubbling)、Outer div click (bubbling)。这表明事件捕获阶段先发生，从外层到内层；然后是事件冒泡阶段，从内层到外层。

实际应用场景

事件冒泡的应用场景

表单验证：在一个包含多个输入框的表单中，可以在表单元素上绑定一个提交事件处理函数。当用户点击提交按钮（通常是表单内的一个子元素）时，事件会冒泡到表单元素，从而触发表单验证逻辑。这样可以统一处理整个表单的验证，而无需为每个输入框单独绑定验证事件。

import React, { Component } from 'react';

class FormExample extends Component {
  handleSubmit = (e) => {
    e.preventDefault();
    // 表单验证逻辑
    console.log('Form submitted, performing validation...');
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Username" />
        <input type="password" placeholder="Password" />
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

export default FormExample;

菜单点击处理：在一个多级菜单结构中，当点击某个菜单项时，事件可以通过冒泡传递到菜单容器，从而根据点击的菜单项执行相应的操作。例如，在一个导航菜单中，点击某个导航链接，事件冒泡到导航栏容器，导航栏容器可以根据链接的内容进行页面跳转或其他操作。

import React, { Component } from 'react';

class MenuExample extends Component {
  handleMenuClick = (e) => {
    const target = e.target.textContent;
    console.log(`Clicked on menu item: ${target}`);
    // 根据点击的菜单项执行操作，如页面跳转等
  }

  render() {
    return (
      <div id="menu" onClick={this.handleMenuClick}>
        <div>Home</div>
        <div>About</div>
        <div>Contact</div>
      </div>
    );
  }
}

export default MenuExample;

事件捕获的应用场景

全局事件控制：在一些应用中，可能需要在最外层的容器捕获某些特定类型的事件，以便进行全局的处理。例如，捕获所有的点击事件，用于实现全局的模态框关闭逻辑。当用户点击页面任何地方时，通过事件捕获，最外层的容器可以检测到点击事件，并判断是否需要关闭当前显示的模态框。

import React, { Component } from 'react';

class GlobalClickExample extends Component {
  handleGlobalClick = (e) => {
    // 判断是否需要关闭模态框的逻辑
    console.log('Global click detected, checking if modal should be closed...');
  }

  render() {
    return (
      <div id="app" onClickCapture={this.handleGlobalClick}>
        {/* 应用的其他内容 */}
      </div>
    );
  }
}

export default GlobalClickExample;

安全限制与过滤：在某些安全相关的场景中，事件捕获可以用于在事件到达目标元素之前进行过滤和检查。例如，在一个包含用户输入的富文本编辑器中，可以通过事件捕获在最外层捕获所有的键盘事件，检查输入内容是否包含非法字符，从而防止恶意代码注入。

import React, { Component } from 'react';

class RichTextEditorExample extends Component {
  handleKeyDownCapture = (e) => {
    const illegalChars = /[<>]/;
    if (illegalChars.test(e.key)) {
      e.preventDefault();
      console.log('Illegal character detected, preventing input.');
    }
  }

  render() {
    return (
      <div id="editor" onKeyDownCapture={this.handleKeyDownCapture}>
        <textarea />
      </div>
    );
  }
}

export default RichTextEditorExample;

React 事件冒泡与捕获的性能考量

冒泡对性能的影响

事件处理函数的执行次数：事件冒泡会导致多个元素上的事件处理函数被依次执行。如果在冒泡路径上的元素绑定了大量复杂的事件处理函数，这可能会对性能产生一定的影响。例如，在一个具有多层嵌套列表项的树形结构中，每个列表项都绑定了点击事件处理函数，当点击最内层的列表项时，事件冒泡会触发大量的事件处理函数，从而增加了执行时间。

import React, { Component } from 'react';

class TreeStructureExample extends Component {
  handleItemClick = () => {
    // 复杂的处理逻辑
    let sum = 0;
    for (let i = 0; i < 1000000; i++) {
      sum += i;
    }
    console.log('Item clicked, performing complex calculation.');
  }

  render() {
    return (
      <ul>
        <li onClick={this.handleItemClick}>
          Item 1
          <ul>
            <li onClick={this.handleItemClick}>
              Sub - item 1.1
              <ul>
                <li onClick={this.handleItemClick}>Sub - item 1.1.1</li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    );
  }
}

export default TreeStructureExample;

虚拟 DOM 更新：事件冒泡过程中，如果事件处理函数导致了组件状态的改变，进而触发虚拟 DOM 的更新，这可能会引起不必要的重新渲染。因为冒泡路径上的每个组件都有可能因为事件处理而更新状态，从而导致整个组件树的重新渲染。为了避免这种情况，可以通过 shouldComponentUpdate 生命周期方法或者使用 React.memo 进行组件优化，减少不必要的重新渲染。

捕获对性能的影响

事件监听开销：使用事件捕获时，由于事件从最外层开始传递，需要在最外层元素上设置捕获阶段的事件监听器。虽然 React 的合成事件机制已经对事件监听进行了优化，但在某些情况下，特别是在页面上有大量元素且频繁触发事件的场景下，仍然可能会增加一定的监听开销。
处理逻辑复杂度：如果在捕获阶段进行复杂的事件处理逻辑，同样会影响性能。例如，在捕获阶段对事件进行复杂的过滤和验证，可能会增加事件处理的时间，导致用户交互的响应变慢。在实际应用中，应该尽量将复杂的逻辑放在冒泡阶段或者在目标元素的事件处理函数中执行，以减少捕获阶段对性能的影响。

与原生 JavaScript 事件冒泡和捕获的区别

事件绑定方式

React：在 React 中，事件绑定是通过在 JSX 中使用驼峰命名的属性来实现的，例如 onClick、onChange 等。并且事件处理函数是绑定到虚拟 DOM 上，而不是真实的 DOM 元素。React 通过合成事件机制在文档级别统一监听事件，然后根据虚拟 DOM 的状态和事件目标，找到对应的组件实例并调用事件处理函数。

import React, { Component } from 'react';

class ReactEventBindingExample extends Component {
  handleClick = () => {
    console.log('React click event');
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        Click me in React
      </div>
    );
  }
}

export default ReactEventBindingExample;

原生 JavaScript：在原生 JavaScript 中，事件绑定有多种方式。可以通过 addEventListener 方法，该方法接受三个参数：事件类型（如 'click'）、事件处理函数和一个可选的布尔值，表示是否在捕获阶段触发。也可以直接在 HTML 标签中通过 onclick 等属性来绑定事件处理函数，但这种方式不推荐，因为它会使 HTML 和 JavaScript 代码紧密耦合。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>原生 JavaScript 事件绑定</title>
</head>

<body>
  <div id="myDiv">Click me in native JavaScript</div>
  <script>
    const myDiv = document.getElementById('myDiv');
    myDiv.addEventListener('click', function () {
      console.log('Native JavaScript click event');
    }, false);
  </script>
</body>

</html>

事件对象

React：React 的合成事件对象是一个跨浏览器的封装，它提供了与原生 DOM 事件对象类似的接口，但具有更好的兼容性。合成事件对象在事件处理函数调用完成后会被重用，所以不应该异步访问它。例如，不能在 setTimeout 中访问合成事件对象的属性，因为此时合成事件对象可能已经被回收。

import React, { Component } from 'react';

class ReactEventObjectExample extends Component {
  handleClick = (e) => {
    console.log(e.target.textContent);
    // 以下代码会有问题，因为事件对象可能已被重用
    setTimeout(() => {
      console.log(e.target.textContent);
    }, 1000);
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        Click me to see React event object
      </div>
    );
  }
}

export default ReactEventObjectExample;

原生 JavaScript：原生 JavaScript 的事件对象是由浏览器创建的，并且在事件处理函数执行期间一直存在。可以在事件处理函数内部的任何地方访问事件对象的属性，包括在异步操作中。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>原生 JavaScript 事件对象</title>
</head>

<body>
  <div id="myDiv">Click me to see native event object</div>
  <script>
    const myDiv = document.getElementById('myDiv');
    myDiv.addEventListener('click', function (e) {
      console.log(e.target.textContent);
      setTimeout(() => {
        console.log(e.target.textContent);
      }, 1000);
    }, false);
  </script>
</body>

</html>

阻止事件传播

React：在 React 中，通过调用合成事件对象的 stopPropagation 方法来阻止事件冒泡，通过调用 stopImmediatePropagation 方法不仅可以阻止事件冒泡，还可以阻止同一元素上其他事件处理函数的执行。

import React, { Component } from 'react';

class ReactStopPropagationExample extends Component {
  handleInnerClick = (e) => {
    e.stopPropagation();
    console.log('Inner div clicked, propagation stopped');
  }

  handleOuterClick = () => {
    console.log('Outer div clicked');
  }

  render() {
    return (
      <div onClick={this.handleOuterClick}>
        Outer Div
        <div onClick={this.handleInnerClick}>
          Inner Div
        </div>
      </div>
    );
  }
}

export default ReactStopPropagationExample;

原生 JavaScript：在原生 JavaScript 中，通过调用事件对象的 stopPropagation 方法来阻止事件冒泡，通过调用 stopImmediatePropagation 方法来阻止事件冒泡并停止同一元素上其他事件处理函数的执行，与 React 类似，但针对的是原生的事件对象。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF - 8">
  <title>原生 JavaScript 阻止事件传播</title>
</head>

<body>
  <div id="outer">
    Outer Div
    <div id="inner">Inner Div</div>
  </div>
  <script>
    const outer = document.getElementById('outer');
    const inner = document.getElementById('inner');
    inner.addEventListener('click', function (e) {
      e.stopPropagation();
      console.log('Inner div clicked, propagation stopped');
    }, false);
    outer.addEventListener('click', function () {
      console.log('Outer div clicked');
    }, false);
  </script>
</body>

</html>

通过深入理解 React 中的事件冒泡与捕获机制，以及它们与原生 JavaScript 事件机制的区别，前端开发者可以更加灵活和高效地处理用户交互，优化应用的性能和用户体验。在实际开发中，应根据具体的业务需求，合理选择使用事件冒泡或捕获，避免不必要的性能开销，确保应用的流畅运行。