📌 前言

在写 DeepSeek‑R1 WebGPU Demo 时我写了这样一段代码：

 setStatus}>Load Model
 { /* ... */ }} />
<textarea =="" onkeydown="{"> { /* ... */ }} />

看起来很简单，对吧？但你有没有想过：

• 痛点 1：为什么 React 用 onClick 而不是 onclick？
• 痛点 2：为什么不用直接调用 addEventListener?
• 痛点 3：React 的事件绑定到底做了什么？

要回答这些问题，我们得从数十年前说起。

🎯 这篇文章适合谁

• 会用 React，但不理解事件程序原理的开发者；
• 想搞清楚 onClick/onclick/addEventListener 区别的同学；
• 对前端框架设计思想感兴趣的同学。

一、DOM0 级事件：最原始的绑定方式 

HTML 内联写法

Click Me

特点：

• Pain Point：Coding 与 UI 紧耦，难以维护；
• CANNOT bind multiple handlers – later ones overwrite earlier ones;
• No way to remove listener programmatically.

DOM 属性写法

// 通过 JS 设置 DOM 属性
const btn = document.getElementById;
btn.onclick = function { alert;}，// 移除
btn.onclick = null;

Pain Point：

• Coding 与 markup 分离，但仍只能绑定;
• The last assignment wins – previous handler silently disappears.

btn.onclick = => console.log;btn.onclick = => console.log;// only “第二个” prints

二、DOM2 级事件：AddEventListener 的革命

// 多个监听器共存
btn.addEventListener => console.log);btn.addEventListener => console.log);// both run，

The event flow now has three phases:

捕获阶段 → 目标阶段 → 冒泡阶段
window → document → body → button → body → document → window

三、React 的设计灵感：为什么要发明合成事件？

原生事件的痛点 

// 痛点1：每个按钮都要绑定独立监听器
document.querySelectorAll.forEach(btn => {
btn.addEventListener;})，// 痛点2：大量监听器导致内存膨胀
// 痛点3：动态添加/删除元素时需要手动管理绑定与解绑

Resulting Pain: 高内存使用 + 难以统一管理生命周期。

React 的方法：统一根节点委托**​**​**​**​**​**​**​**​*** tsx // 想象中的写法 // 看似在 button 上绑定 // React 在根节点做了统一监听 root.addEventListener('click',e => { // 根据 e.target 找到对应组件并执行 handler });

This is **event delegation** – a single listener per event type at root.

合成事件层‑包装