25、React 事件处理全解析

React 事件处理全解析

1. 浏览器中的事件阶段和传播机制

1.1 事件冒泡与捕获

在浏览器中，React 事件和 HTML 事件都会冒泡。当点击一个按钮时，该按钮的每个祖先元素都会触发一个事件，实际上会触发两个事件，一个在目标元素之前，另一个在目标元素之后。

所有事件不仅会冒泡，还会捕获。捕获发生在事件被派发到目标元素之前。事件派发有三个阶段：
- 捕获阶段 ：从 window 元素开始，按降序经过每个祖先元素，直到目标元素的父元素。
- 目标阶段 ：事件直接发送到目标元素本身。
- 冒泡阶段 ：从目标元素的父元素开始，按升序经过祖先元素，直到 window 元素。

1.2 事件监听

在 JavaScript 中，默认监听事件的冒泡和目标阶段。可以通过 addEventListener 方法添加监听器：

element.addEventListener("click", onClick);

如果要监听捕获阶段的事件，需要添加第三个参数：

element.addEventListener("click", onClick, { capture: true });