前端框架里的事件处理，到底怎么“听”用户操作的？

点按钮、输文字、拖拽滑块——这些看似简单的动作，背后全靠前端框架的事件处理机制在悄悄干活。它不是直接监听 DOM 原生事件就完事了，而是加了一层“聪明”的包装。

原生事件太直白，框架要更省心

比如你在 Vue 里写 @click="handleClick"，React 里写 onClick={handleClick}，表面看和原生 addEventListener('click', ...) 差不多，但实际执行时机、绑定方式、甚至事件对象都悄悄变了。

Vue 的事件代理 + 自动绑定

Vue 模板里的 @click 不是每个元素都单独绑一次监听器。它会把事件统一委托到组件根节点（或父容器），再根据事件冒泡路径判断该触发谁。这样既节省内存，又避免重复绑定。另外，this 自动指向当前组件实例，不用手动 .bind(this)：

<template>
  <button @click="sayHi">打招呼</button>
</template>
<script>
export default {
  methods: {
    sayHi() {
      // 这里的 this 就是组件实例，天然可用
      console.log('你好，' + this.userName);
    }
  }
}</script>

React 的合成事件（SyntheticEvent）

React 把浏览器原生事件封装成 SyntheticEvent 对象，统一处理兼容性问题，还做了池化复用（减少 GC 压力）。你拿到的 event 不是原生对象，所以不能直接 return false 阻止默认行为，得用 event.preventDefault()：

function MyForm() {
  function handleSubmit(event) {
    event.preventDefault(); // 必须这么写
    console.log('表单没刷新页面，但数据已提交');
  }

  return <form onSubmit={handleSubmit}>
    <input type="text" />
    <button type="submit">提交</button>
  </form>;
}

事件传参和修饰符，让逻辑更干净

有时候你点一个列表项，想顺便把它的 ID 传给方法。Vue 支持直接在模板里写：@click="handleClick(item.id)"；React 则常用箭头函数或 bind 包一层。不过要注意：Vue 的 .stop、.prevent、.once 这类修饰符，能帮你少写几行 JS：

<a href="/login" @click.prevent="openLoginModal">登录</a>
<!-- 点击不跳转，只执行 openLoginModal -->

而 React 中就得手动写 event.preventDefault()，多一行，也多一分出错可能。

真实场景：为什么我改了 state，点击却没反应？

新手常遇到：按钮点了，控制台有 log，但界面上的数据就是不更新。大概率是事件回调里用了箭头函数导致 this 指向错乱（Vue Options API 下），或者 React 中忘记把函数定义在组件作用域内，又或者事件绑定写成了 onClick={handleClick()} —— 多了括号，变成立即执行，而不是点击时执行。

记住一点：事件处理器名字后面别加 ()，除非你真想让它一加载就跑一遍。