一：引言

React的事件处理采用的是合成事件（SyntheticEvent），而普通HTML事件则是直接使用原生DOM事件，那么，这两者的区别是什么呢？

二：区别

（1）事件命名与语法

1：命名规则：

React 采用小驼峰命名（如 onClick）

class MyComponent extends React.Component {
  handleClick() {
    // 处理点击事件的逻辑
  }

  render() {
    return <button onClick={this.handleClick}>点击</button>;
  }
}

普通 HTML 使用全小写（如 onclick）‌

<button onclick="handleClick()">点击</button>
<script>
function handleClick() {
  // 处理点击事件的逻辑
}
</script>

2：事件处理函数

HTML 通过字符串指定事件（如 onclick="handleClick()"）‌

React 通过函数直接赋值（如 onClick={handleClick}），且需手动绑定 this 作用域‌

（2）默认行为与事件传播

1：阻止默认行为

HTML 可通过 return false 阻止默认行为‌

<a href="https://example.com" onclick="event.preventDefault(); return false;">点击这里不跳转</a>

React 必须显式调用 event.preventDefault()

class MyComponent extends React.Component {
  handleClick(event) {
    event.preventDefault(); // 阻止默认行为
    // 处理点击事件的逻辑
  }

  render() {
    return <a href="https://example.com" onClick={this.handleClick}>点击这里不跳转</a>;
  }
}

2：事件代理机制

React 将所有事件统一委托到 document 层处理，而非直接绑定到 DOM 元素上，减少内存消耗并统一管理‌

（3）事件对象差异

1：事件对象类型

React 使用封装后的 SyntheticEvent 对象，而非原生 DOM 事件对象，提供跨浏览器兼容性‌

2：事件属性

React 事件对象的属性（如 clientX、target）与原生事件一致，但需通过 event.nativeEvent 访问底层原生事件‌

（4）性能与设计优化

1：事件池复用

React 通过事件池复用 SyntheticEvent 对象，减少内存分配和垃圾回收频率‌

2：动态事件处理

React 支持通过 props 动态传递事件处理函数，便于组件复用和状态管理；HTML 需手动绑定和解绑‌

三：拓展

（1）React事件处理机制

1：所有事件都被统一注册到 document 节点上，而不是直接绑定到 DOM 元素

2：当事件触发时，React 将事件逐级向上冒泡并处理

3：可以节省内存，提高性能

4：原生事件会先于合成事件执行。合成事件需要冒泡到document对象上才会被分发到相应的组件上。如果原生事件阻止了冒泡，那么合成事件可能不会执行

// 假设有一个既绑定了原生事件又绑定了合成事件的按钮
<button 
  onclick="nativeClickHandler(event)" 
  onClick={reactClickHandler}
>
  点击
</button>

<script>
function nativeClickHandler(event) {
  event.stopPropagation(); // 阻止冒泡
  console.log('原生事件执行');
}

class MyComponent extends React.Component {
  reactClickHandler() {
    console.log('合成事件执行');
  }

  render() {
    return <button {.../* 属性绑定 */}>点击</button>; // 示例中已简化
  }
}
// 在这个例子中，如果原生事件阻止了冒泡，那么合成事件将不会执行。
</script>

（2）合成事件的特点

1：跨浏览器兼容性=>React 抹平了不同浏览器的差异

2：事件池=>React 通过对象池来管理事件对象，避免频繁创建和销毁

3：自动清理=>事件处理完成后，合成事件对象的所有属性都会被置为 null

（3）阻止默认行为

HTML=>可以通过返回 false 或调用 event.preventDefault()。

React =>只能使用 e.preventDefault()，不支持返回 false 阻止默认行为

（4）事件冒泡的处理

HTML=>event.stopPropagation() 阻止冒泡

React=>e.stopPropagation()，但由于事件委托机制，其实现方式和原生的不完全相同