React 事件和 Dom 事件的区别

function App() {
  const onClickButton = (event) => {
        console.log('合成事件：', e)
    console.log('currentTarget：', e.currentTarget)
    console.log('target：', e.target)
    console.log('原生事件：', e.nativeEvent)
    console.log('currentTarget：', e.nativeEvent.currentTarget)
    console.log('target：', e.nativeEvent.target)
  }
  return (
    <div className="App">
      <button onClick={onClickButton}>点我</button>
    </div>
  );
}

这里面的 event 不是原生事件，而是合成事件 SyntheticEvent

原生事件要使用 event.nativeEvent

原生事件是被挂在到 document 上的，所以 currentTarget 获取到的是 document

虽然 SyntheticEvent 是 react 模拟的，但 Dom 具有的能力，它都有，只是这些能力不受 Dom 控制。比如：阻止默认行为 preventDefault ，阻止冒泡 stopPropagation