一、核心差異對比表

維度	原生事件	React 事件
綁定語法	HTML 屬性（onclick）或 DOM API（addEventListener）	JSX 中使用駝峰式屬性（onClick）
綁定位置	直接綁定到具體 DOM 元素	統一委托到根節點（React 17 及以前到 document，React 18 到容器）
事件對象	原生 Event 對象，不同瀏覽器實現有差異	合成事件 SyntheticEvent，封裝原生事件并抹平瀏覽器差異
傳播機制	完整的捕獲 → 目標 → 冒泡 三階段	表面只有冒泡，捕獲需顯式聲明（如 onClickCapture），React 18 支持完整階段
阻止傳播	event.stopPropagation() 阻止整個 DOM 樹的傳播	僅阻止合成事件傳播，不影響原生事件
默認行為	event.preventDefault() 或 HTML 中返回 false	只能使用 event.preventDefault()
this 指向	默認指向 DOM 元素，可通過 bind、箭頭函數修改	默認 undefined，需手動綁定（構造函數、箭頭函數或類屬性）
觸發順序	按 DOM 樹層級依次觸發	原生事件總是先觸發，合成事件在冒泡到根節點后觸發
性能優化	大量綁定時可能導致內存開銷大	事件委托 + 事件池（復用事件對象），減少監聽器數量和內存占用
兼容性	需處理瀏覽器差異（如 IE 的 attachEvent）	統一 API，自動處理兼容性

二、關鍵機制詳解

1. 事件委托機制

• 原生事件：
  每個元素需單獨綁定監聽器，大量元素時性能較差

  // 手動為每個按鈕綁定事件
  document.querySelectorAll('button').forEach(btn => {btn.addEventListener('click', handleClick);
  });
  

• React 事件：
  所有事件統一委托到根節點，通過事件類型和目標元素匹配處理函數。

  // 所有按鈕的點擊事件最終由根節點的統一處理器分發
  <button onClick={handleClick}>Click</button>
  

2. 合成事件 SyntheticEvent

• 跨瀏覽器封裝：
  React 將不同瀏覽器的原生事件封裝為統一接口，例如：

  function handleClick(e) {e.preventDefault(); // 兼容所有瀏覽器的阻止默認行為console.log(e.target); // 標準化的目標元素
  }
  

• 事件池優化：
  React 復用事件對象以減少 GC 壓力（React 17 及以前）：

  function handleClick(e) {setTimeout(() => {console.log(e.target); // React 17 及以前此處會失效，因事件對象已被重置}, 0);
  }
  

3. 事件傳播差異

• 原生事件：

  預覽

  <div onclick="console.log('原生冒泡')"><button onclick="console.log('原生目標')">Click</button>
  </div>
  

  傳播順序：button → div（冒泡階段）。

• React 事件：

  <div onClickCapture={() => console.log('React 捕獲')}><button onClick={() => console.log('React 冒泡')}>Click</button>
  </div>
  

  React 18 傳播順序：div（捕獲） → button（目標） → div（冒泡）。

4. 觸發順序細節

當同時存在原生和合成事件時：

<div onClick={() => console.log('合成事件')} onMouseDown={() => console.log('合成 mousedown')}
><button onclick="console.log('原生 click')" onmousedown="console.log('原生 mousedown')">Click</button>
</div>

點擊按鈕的觸發順序：

1. 原生 mousedown → 原生 click → 合成 onMouseDown → 合成 onClick。

三、特殊場景對比

1. 混合使用原生與合成事件

class App extends React.Component {componentDidMount() {// 手動綁定原生事件this.buttonRef.current.addEventListener('click', () => {console.log('原生事件');});}render() {return (<button ref={this.buttonRef} onClick={() => console.log('合成事件')}>Click</button>);}
}

• 原生事件先觸發，合成事件后觸發。
• 原生事件的 stopPropagation() 會阻止合成事件觸發。

2. 事件池與異步訪問

React 17 及以前復用事件對象，異步訪問需提前保存屬性：

function handleClick(e) {const target = e.target; // 必須提前保存setTimeout(() => {console.log(target); // 正確訪問console.log(e.target); // React 17 及以前會失效}, 0);
}

React 18 移除了事件池，可直接異步訪問。

四、總結

特性	原生事件	React 事件
優勢	直接控制 DOM，適合復雜交互場景	跨瀏覽器一致性，性能優化，代碼簡潔
劣勢	兼容性差，大量綁定時性能問題	抽象層級高，特殊場景需結合原生事件
適用場景	自定義滾動、拖拽等復雜 DOM 操作	組件內交互、表單處理等常規場景