React 的事件系统与原生 HTML 事件系统在使用上相似，但存在几个关键区别，主要体现在事件处理机制、事件对象和事件绑定方式上。
以下是两者的主要区别：
1. 事件命名规范不同
- HTML 原生事件：使用小写命名。
<button onclick="handleClick()">点击</button> - React 事件：采用驼峰命名法 (camelCase)。
<button onClick={handleClick}>点击</button>
2. 事件处理函数的传递方式不同
- HTML 原生事件：事件处理程序以字符串形式写在属性值中。
<button onclick="console.log('Clicked!')">点击</button> - React 事件：事件处理程序是JavaScript 函数（或箭头函数），通过大括号
{}传入。<button onClick={() => console.log('Clicked!')}>点击</button>
3. 事件对象 (Event Object) 不同
- HTML 原生事件：使用浏览器原生的
Event对象。 - React 事件：使用
SyntheticEvent对象。
SyntheticEvent 是 React 封装的跨浏览器兼容的事件对象。它抹平了不同浏览器之间的事件差异，提供了一致的接口。其属性和方法（如 preventDefault(), stopPropagation()）与原生事件对象类似，但它是跨浏览器兼容的包装器。
注意：从 React 17 开始，事件不再绑定在
document上，而是绑定在对应的 React 根容器（root DOM node）上，这改变了事件委托的层级。
4. this 的指向问题
- HTML 原生事件：
this指向触发事件的 DOM 元素。<button onclick="console.log(this)">点击</button> <!-- this 指向 button 元素 --> - React 事件：在类组件中，事件处理函数中的
this默认不指向组件实例，需要手动绑定（如使用bind、箭头函数或类属性语法）。在函数组件中，通常使用箭头函数或useCallback来避免重复渲染。class
5. 阻止默认行为的方式不同
- HTML 原生事件：通常通过
return false来阻止默认行为和事件冒泡（不推荐）。 - React 事件：必须显式调用
event.preventDefault()。
6. 事件委托机制不同
- HTML 原生事件：开发者可以手动实现事件委托，将事件监听器绑定到父元素上。
- React 事件：React 内部实现了事件委托，将所有事件处理器绑定到文档的根节点（React 17 之前是
document，17+ 是根容器），从而提高性能并减少内存占用。
总结对比表
| 特性 | HTML 原生事件 | React 事件 |
|---|---|---|
| 命名 | 小写 (onclick) | 驼峰命名 (onClick) |
| 处理函数 | 字符串 | JavaScript 函数 |
| 事件对象 | 原生 Event | SyntheticEvent (跨浏览器包装) |
this 指向 | DOM 元素 | 需手动绑定（类组件） |
| 阻止默认行为 | return false | event.preventDefault() |
| 事件委托 | 手动实现 | React 内部自动实现 |
理解这些区别有助于更好地在 React 中处理用户交互。
THE END
