---

前言

React的合成事件（SyntheticEvent）是React為了統一不同瀏覽器的事件處理行為而封裝的一套跨瀏覽器事件系統。它與原生事件的主要區別如下：

---

1. 事件綁定方式
? 合成事件：使用駝峰命名法綁定事件（如onClick），并通過JSX直接傳遞給組件。

  <button onClick={handleClick}>點擊</button>

? 原生事件：通過addEventListener或HTML屬性（小寫命名，如onclick）綁定。

  button.addEventListener('click', handleClick);

---

2. 事件委托機制
? 合成事件：React將事件委托到根節點（如React 17 之前是 document，React 17+的root節點），通過事件冒泡捕獲子組件的事件，而非直接綁定到目標元素。這減少了內存消耗，并簡化了動態元素的處理。

? 原生事件：直接綁定到具體元素，可能因頻繁的元素增刪導致內存問題。

---

3. 事件對象
? 合成事件：接收的是SyntheticEvent對象，封裝了原生事件對象，統一了跨瀏覽器的屬性（如e.target、e.stopPropagation()）。

? 原生事件：直接使用瀏覽器提供的Event對象，不同瀏覽器的行為和屬性可能存在差異。

---

4. 事件池（Event Pooling）
? 合成事件：事件對象會被重用（出于性能考慮），異步代碼中訪問事件屬性需調用e.persist()。

handleClick = (e) => {e.persist(); // 保留事件對象setTimeout(() => console.log(e.target), 100);
};

? 原生事件：事件對象不會被重用，可直接在異步代碼中使用。

---

5. 事件傳播與阻止冒泡
? 合成事件：e.stopPropagation()僅阻止合成事件的傳播，不影響原生事件。

? 原生事件：e.stopPropagation()會阻止事件的捕獲/冒泡，可能導致React合成事件無法觸發（如果事件未冒泡到根節點）。

---

6. 執行順序
? 同級事件：直接綁定在元素上的原生事件先于合成事件執行。

? 父子元素：

1. 原生捕獲階段事件（如addEventListener('click', handler, true)）。
2. 合成捕獲階段事件（如onClickCapture）。
3. 原生冒泡階段事件。
4. 合成冒泡階段事件。

---

7. 自動綁定管理
? 合成事件：React在組件掛載/卸載時自動處理事件綁定與解綁。

? 原生事件：需手動通過removeEventListener解綁，否則可能導致內存泄漏。

---

8. 兼容性
? 合成事件：統一處理瀏覽器兼容性問題（如IE的event.target與event.srcElement差異）。

? 原生事件：需開發者自行處理兼容性。

---

9. 事件類型覆蓋
? 合成事件：支持常見事件（如onChange、onMouseEnter），但特殊事件（如resize）需通過原生事件處理。

? 原生事件：支持所有瀏覽器事件。

---

示例：混合使用時的行為

function App() {const handleSyntheticClick = () => console.log("合成事件");const handleNativeClick = () => console.log("原生事件");useEffect(() => {document.addEventListener("click", handleNativeClick);return () => document.removeEventListener("click", handleNativeClick);}, []);return <button onClick={handleSyntheticClick}>按鈕</button>;
}

點擊按鈕時，輸出順序為：

1. 原生事件（直接綁定在document上的冒泡階段事件）。
2. 合成事件（通過React根節點委托處理）。

---

總結
React合成事件通過封裝原生事件，提供了跨瀏覽器一致性、性能優化和便捷的事件管理，但在混合使用時需注意執行順序和事件傳播的影響。對于特殊場景（如非冒泡事件scroll），仍需依賴原生事件處理。