17370845950

JavaScript事件处理是网页响应用户操作的机制，核心包括事件源、事件类型和处理函数；主流绑定方式为onclick（单次覆盖）和addEventListener（多绑定、可控阶段）；事件流分捕获、目标、冒泡三阶段，常用preventDefault、stopPropagation等控制方法。

JavaScript中的事件处理，就是让网页对用户操作或浏览器行为做出响应的机制。比如你点一下按钮、输几个字、滚动页面、按下回车——这些动作都会触发一个“事件”，而事件处理就是告诉浏览器：“当这事发生时，请执行我的代码”。

事件处理的核心是三要素

• 事件源：哪个元素被操作了（比如一个 ）
• 事件类型：发生了什么动作（比如 'click'、'input'、'keydown'）
• 事件处理函数：要执行的具体逻辑（比如弹个提示、提交表单、改变颜色）

主流绑定方式有两种

• element.onclick = function() { ... }
  简单直接，但一个元素同类型事件只能绑一个，后绑会覆盖前绑
• element.addEventListener('click', handler, false)
  推荐使用，支持同一元素绑定多个相同事件，可选捕获或冒泡阶段，更灵活可控

事件不是孤立发生的，它会流动
点击一个按钮，事件其实会经过三个阶段：

• 先从 window 往下传（捕获阶段）
• 到达那个按钮本身（目标阶段）
• 再从按钮往上传到 body、html、document（冒泡阶段）
  大多数日常交互都发生在冒泡阶段，这也是事件委托能生效的基础。

常用控制方法

• event.preventDefault()：阻止默认行为（比如不让表单提交、不让链接跳转）
• event.stopPropagation()：停止向上冒泡（避免父级监听器也被触发）
• event.stopImmediatePropagation()：连同级其他监听器也一并跳过

基本上就这些。写得清楚、绑得合理、流得明白，事件处理就不难。