React合成事件是React模擬原生DOM事件所有能力的事件對象，即瀏覽器原生事件的跨瀏覽器包裝器；它根據W3C規範來定義合成事件，相容於所有瀏覽器，擁有與瀏覽器原生事件相同的介面。在React中，所有事件都是合成的，不是原生DOM事件，但可以透過「e.nativeEvent」屬性來取得DOM事件。
本教學操作環境：Windows7系統、react18版、Dell G3電腦。
React基於瀏覽器的事件機製本身實作了一套事件機制，包括事件註冊、事件的合成、事件冒泡、事件派發等
#在React中這套事件機制稱為合成事件
#合成事件（SyntheticEvent）
React 合成事件（SyntheticEvent）是React 模擬原生DOM 事件所有能力的事件對象，即瀏覽器原生事件的跨瀏覽器包裝器。它根據 W3C 規格 來定義合成事件，相容於所有瀏覽器，並擁有與瀏覽器原生事件相同的介面。例如
const button = <button onClick={handleClick}>按钮</button>在 React 中，所有事件都是合成的，不是原生 DOM 事件，但可以透過 e.nativeEvent 屬性取得 DOM 事件。例如：
const handleClick = (e) => console.log(e.nativeEvent);;
const button = <button onClick={handleClick}>按钮</button>從上面可以看到React事件和原生事件也非常的相似，但也有一定的差異：
事件名稱命名方式不同
// 原生事件绑定方式
<button onclick="handleClick()">按钮命名</button>
// React 合成事件绑定方式
const button = <button onClick={handleClick}>按钮命名</button>事件處理函數書寫不同
// 原生事件 事件处理函数写法
<button onclick="handleClick()">按钮命名</button>
// React 合成事件 事件处理函数写法
const button = <button onClick={handleClick}>按钮命名</button>雖然onclick看似綁定到DOM元素上，但實際上並不會把事件代理函數直接綁定到真實的節點上，而是把所有的事件綁定到結構的最外層，使用一個統一的事件去監聽。 【相關推薦：Redis影片教學、程式設計教學】
這個事件監聽器上維持了一個映射來保存所有元件內部的事件監聽和處理函數。當元件掛載或卸載時，只是在這個統一的事件監聽器上插入或刪除一些物件。
當事件發生時，首先被這個統一的事件監聽器處理，然後在映射裡找到真正的事件處理函數並呼叫。這樣做簡化了事件處理和回收機制，效率也大大提升。
關於React合成事件與原生事件執行順序，可以看看下面一個例子：
import React from 'react';
class App extends React.Component{
constructor(props) {
super(props);
this.parentRef = React.createRef();
this.childRef = React.createRef();
}
componentDidMount() {
console.log("React componentDidMount！");
this.parentRef.current?.addEventListener("click", () => {
console.log("原生事件：父元素 DOM 事件监听！");
});
this.childRef.current?.addEventListener("click", () => {
console.log("原生事件：子元素 DOM 事件监听！");
});
document.addEventListener("click", (e) => {
console.log("原生事件：document DOM 事件监听！");
});
}
parentClickFun = () => {
console.log("React 事件：父元素事件监听！");
};
childClickFun = () => {
console.log("React 事件：子元素事件监听！");
};
render() {
return (
<div ref={this.parentRef} onClick={this.parentClickFun}>
<div ref={this.childRef} onClick={this.childClickFun}>
分析事件执行顺序
</div>
</div>
);
}
}
export default App;輸出順序為：
原生事件：子元素 DOM 事件监听！ 原生事件：父元素 DOM 事件监听！ React 事件：子元素事件监听！ React 事件：父元素事件监听！ 原生事件：document DOM 事件监听！
可以得出以下結論：
React 所有事件都掛載在document 物件上
當真實DOM元素觸發事件，會冒泡到document 物件後，再處理React 事件
所以會先執行原生事件，然後處理React 事件
最後真正執行document 上掛載的事件
對應程序如圖所示：
document.body.addEventListener('click', e => {
if (e.target && e.target.matches('div.code')) {
return;
}
this.setState({ active: false, }); });
}程式設計基礎影片）
以上是react的合成事件如何形容的詳細內容。更多資訊請關注PHP中文網其他相關文章！
