前端Wiki/词条/合成事件

合成事件

定义React 包装原生事件得到的统一事件对象，抹平浏览器差异并托管事件委托

合成事件是 React 事件系统的核心抽象：它把原生 DOM 事件包一层，提供统一接口（target、preventDefault、stopPropagation 行为一致），并补齐不同浏览器的差异。React 17 之后事件委托从 document 收回到挂载根节点，但开发者侧的用法没有变化，依旧写 onClick 这类驼峰属性。

事件对象是按事件类型池化复用的：事件回调执行结束后对象属性会被重置，异步代码里再访问 e.target 得到的是 undefined，需要先 e.persist() 或提前取值。另外 onClickCapture、focus、blur 等的捕获冒泡语义与原生一致，冒泡过程中 React 合成事件与原生事件并不互相阻断。

React 17 起委托挂在应用根节点，不再是 document，多应用共存更干净
跨浏览器接口统一，preventDefault 与 stopPropagation 行为稳定
事件回调结束后对象被重置，异步使用前 persist 或先取值

JavaScript

import { useState } from 'react';

export default function App() {
  const [val, setVal] = useState('');

  const handleChange = (e) => {
    const target = e.target;                 // 先取值，异步安全
    setTimeout(() => setVal(target.value), 0);
  };

  const handleClick = (e) => {
    e.preventDefault();                      // 统一接口，跨浏览器一致

    setTimeout(() => setVal('提交完成'), 300);
  };

  return (
    <form>
      <input value={val} onChange={handleChange} />
      <button onClick={handleClick}>提交</button>
    </form>
  );
}

⚠ 常见误区

异步代码里直接读 e.target，回调结束后已是 undefined
用 return false 代替 preventDefault，新版 React 不再拦截默认行为
React 与原生事件的阻止冒泡互不生效，混用时调试到怀疑人生

🔗 相关词条事件处理与合成事件表达式与条件渲染