你点一下购物车图标，数字跳出来；点一下切换按钮，页面主题从白天变成黑夜——这些看似简单的操作，背后其实有一套完整的事件处理机制在悄悄工作。
不是所有“点”都一样
原生 JavaScript 里，我们写 button.addEventListener('click', handler) 就能监听点击。但实际开发中，比如用 Vue 或 React 写一个商品列表，每行都有个「加入购物车」按钮，要是每个都手动绑事件，代码又臭又长，还容易漏掉销毁逻辑。
前端框架干的一件聪明事，就是把事件“收归统一管理”。比如 Vue 模板里这样写：
<button @click="addToCart(item)">加入购物车</button>你没写 addEventListener，也没管 DOM 是否已加载，框架自动帮你找到这个按钮，并在合适时机绑定事件，甚至还能自动清理（比如组件卸载时）。
事件不是直接传给函数的
你以为点了按钮，就立刻执行 addToCart？其实中间还有一层“包装”。Vue 和 React 都会把原生事件对象包装成自己的事件对象，加了一层兼容性处理和调试支持。比如你在 Vue 中打印 $event，看到的不是原始的 MouseEvent，而是一个经过标准化的实例，不管你是用 Chrome 还是 Safari，行为都一致。
事件还能“冒泡”，但框架管得更细
原生 DOM 里，点击子元素会一路向上冒泡到 body。框架也支持冒泡，但加了语法糖。比如 Vue 的 @click.stop 就是阻止冒泡，@click.prevent 是阻止默认行为——不用再写 e.stopPropagation() 或 e.preventDefault() 那么啰嗦。
React 更进一步，它用的是“事件委托”：整个应用只在 document 上监听一次 click，然后靠内部的事件系统分发到具体组件。这既减少内存占用，又避免频繁绑定/解绑。
真实场景：表单提交不刷新页面
做个登录框，用户填完点「登录」，传统写法要 e.preventDefault() 防止跳转。在 Vue 里，一句话搞定：
<form @submit.prevent="handleLogin">
<input v-model="username" />
<button type="submit">登录</button>
</form>React 也类似：
function LoginForm() {
const handleSubmit = (e) => {
e.preventDefault();
api.login(username);
};
return (
<form onSubmit={handleSubmit}>
<input value={username} onChange={e => setUsername(e.target.value)} />
<button type="submit">登录</button>
</form>
);
}你看，框架没消灭事件，而是把重复、易错、跨浏览器的部分藏起来了，让你专注“用户点了之后该干嘛”，而不是“怎么让点击不炸锅”。