引言用户点一下按钮页面就弹出提示用户在输入框敲字下方就出现联想词。这一切看起来理所当然但背后有一套完整的机制在支撑。这套机制叫事件。理解它你才能明白页面交互到底是怎么发生的也才能在出问题时知道去哪里找原因。一、什么是事件事件就是用户或浏览器做出的一个动作。用户点击鼠标是一个事件按下键盘是一个事件页面加载完成也是一个事件甚至网络断开、窗口大小改变都是事件。当这些动作发生时浏览器不会视而不见而是把它包装成一个对象里面记录了这次动作的各种信息点的是哪个元素、鼠标在什么位置、按的是哪个键、有没有按住组合键。这个对象就是事件对象。二、事件监听光有事件还不够还得有人接住它。这就需要事件监听。所谓监听就是提前告诉浏览器如果某个元素上发生了某个事件请执行我指定的这段逻辑。这个逻辑通常是一个函数叫事件处理函数。一个元素可以监听多个事件比如既监听点击又监听鼠标移入。同一个事件也可以绑定多个处理函数触发时按绑定顺序依次执行。三、事件流这里有一个容易被忽略的细节当你在一个嵌套很深的元素上点击时事件并不是只发生在那个元素上而是会经历一个传播过程。这个过程叫事件流分三个阶段。捕获阶段事件从最外层容器开始一层层向内传递直到到达目标元素。这个阶段默认很少被使用但它是存在的。目标阶段事件到达真正被点击的那个元素触发它身上的处理函数。冒泡阶段事件从目标元素开始一层层向外传递回到最外层。大多数情况下我们绑定的事件处理函数都是在冒泡阶段执行的。理解事件流的意义在于你知道一个点击事件可能会触发多个元素的处理逻辑顺序是从内到外。四、事件委托事件流带来一个非常实用的技巧事件委托。假设一个列表有一百个条目每个条目点击后都要做不同的事。最直接的做法是给每个条目都绑一个监听器。但这样会创建一百个监听器占用内存而且如果列表动态增加条目新条目还得重新绑定。事件委托的思路是不给每个子元素绑定而是把监听器绑在它们的父元素上。利用冒泡机制子元素被点击时事件会冒泡到父元素父元素的处理函数再根据事件对象里的信息判断到底是哪个子元素被点了然后做对应处理。好处很明显监听器数量大幅减少动态新增的子元素自动生效不用额外处理逻辑集中在一处便于维护。这是实际开发中非常常用的手法。五、常见事件类型鼠标事件点击、双击、按下、抬起、移入、移出、移动。这是最常用的一类。键盘事件按下、抬起、持续按住。常用于快捷键、表单提交、游戏控制。表单事件输入、改变、获得焦点、失去焦点、提交。表单校验几乎全靠它们。触摸事件触摸开始、移动、结束。移动端开发必备。页面事件加载完成、滚动、窗口大小改变、页面可见性变化。每一类事件都有自己的适用场景和注意事项比如滚动事件触发极其频繁直接在里面做复杂计算会导致页面卡顿需要做节流处理。六、阻止默认行为与阻止冒泡有两个容易混淆的概念。默认行为是浏览器自带的行为。点击链接会跳转提交表单会刷新页面右键会弹出菜单。有时候我们想自己接管这些行为就需要阻止默认行为。比如用 JS 做表单校验校验不通过就不让表单提交。冒泡是事件的传播。有时候子元素处理完事件后不希望父元素也跟着触发就需要阻止冒泡。比如一个弹窗内部有按钮点击按钮时不想让弹窗的遮罩层关闭逻辑被触发。两者的区别在于一个阻止的是浏览器自带的动作一个阻止的是事件向外传播。用错场景就会出现该跳转的不跳转或该关闭的关不掉这类问题。七、总结事件机制是前端交互的基石。从事件的定义到监听、事件流、委托再到常见类型和两个阻止这一整套知识构成了页面响应用户的完整链条。把这些搞清楚你写的交互逻辑才会稳定、可维护出问题时也能迅速定位。