react实现捕获事件
事件捕获与冒泡机制
在React中，事件处理遵循DOM的事件流机制，包含捕获阶段、目标阶段和冒泡阶段。默认情况下React事件在冒泡阶段触发，但可以通过特定语法实现捕获阶段的监听。
使用onCapture语法
在事件名后添加Capture后缀可监听捕获阶段。例如onClick对应捕获阶段的onClickCapture：
function App() {
const handleCaptureClick = (e) => {
console.log('捕获阶段触发', e.target);
};
const handleBubbleClick = (e) => {
console.log('冒泡阶段触发', e.target);
};
return (
<div onClickCapture={handleCaptureClick}>
<button onClick={handleBubbleClick}>点击测试</button>
</div>
);
}原生事件捕获
需要通过addEventListener的第三个参数设置为true来监听捕获阶段：
useEffect(() => {
const div = document.getElementById('capture-div');
div.addEventListener('click', handleCapture, true);
return () => div.removeEventListener('click', handleCapture, true);
}, []);事件传播控制
调用e.stopPropagation()可阻止事件继续传播：
const handleCapture = (e) => {
e.stopPropagation();
console.log('捕获阶段阻止传播');
};合成事件系统
React的合成事件（SyntheticEvent）是跨浏览器包装器，其捕获阶段行为与原生DOM一致但具有更好的兼容性。所有合成事件都自动池化以提高性能，异步访问事件属性需调用e.persist()。
注意事项
- 捕获阶段监听器应执行轻量级操作
- 避免过度使用stopPropagation以免破坏预期的事件流
- 服务端渲染场景下需谨慎处理事件绑定
- React 17+版本事件委托已改为挂载到rootNode而非document
