React合成事件是React模擬原生DOM事件所有能力的一個(gè)事件對象，即瀏覽器原生事件的跨瀏覽器包裝器；它根據(jù)W3C規(guī)范來定義合成事件，兼容所有瀏覽器，擁有與瀏覽器原生事件相同的接口。在React中，所有事件都是合成的，不是原生DOM事件，但可以通過“e.nativeEvent”屬性獲取DOM事件。

前端（vue）入門到精通課程，老師在線輔導(dǎo)：聯(lián)系老師
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用

本教程操作環(huán)境：Windows7系統(tǒng)、react18版、Dell G3電腦。

一、合成事件是什么

React基于瀏覽器的事件機(jī)制自身實(shí)現(xiàn)了一套事件機(jī)制，包括事件注冊、事件的合成、事件冒泡、事件派發(fā)等

在React中這套事件機(jī)制被稱之為合成事件

合成事件（SyntheticEvent）

React 合成事件（SyntheticEvent）是 React 模擬原生 DOM 事件所有能力的一個(gè)事件對象，即瀏覽器原生事件的跨瀏覽器包裝器。它根據(jù) W3C 規(guī)范 來定義合成事件，兼容所有瀏覽器，擁有與瀏覽器原生事件相同的接口。例如

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事件和原生事件也非常的相似，但也有一定的區(qū)別：

• 事件名稱命名方式不同

// 原生事件綁定方式 <button onclick="handleClick()">按鈕命名</button>        // React 合成事件綁定方式 const button = <button onClick={handleClick}>按鈕命名</button>

• 事件處理函數(shù)書寫不同

// 原生事件 事件處理函數(shù)寫法 <button onclick="handleClick()">按鈕命名</button>        // React 合成事件 事件處理函數(shù)寫法 const button = <button onClick={handleClick}>按鈕命名</button>

雖然onclick看似綁定到DOM元素上，但實(shí)際并不會(huì)把事件代理函數(shù)直接綁定到真實(shí)的節(jié)點(diǎn)上，而是把所有的事件綁定到結(jié)構(gòu)的最外層，使用一個(gè)統(tǒng)一的事件去監(jiān)聽?！?/p>