JavaScript事件处理机制基于事件驱动模型，核心是addEventListener()方法，支持多监听器、捕获/冒泡控制及options配置；事件流分捕获、目标、冒泡三阶段，可利用冒泡实现事件委托；移除监听器需函数引用一致。
JavaScript事件处理机制是浏览器响应用户操作（如点击、输入、滚动）或系统行为（如页面加载完成、网络请求结束）的一套规则。核心是“事件驱动”：代码不主动执行，而是等待特定事件发生后触发对应函数。
事件监听的三种常见方式
为元素添加事件监听，最常用也最推荐的是 addEventListener() 方法；另外两种方式虽可用，但存在明显局限：
-
HTML内联事件属性（如
onclick="handleClick()"）：逻辑与结构混杂，难以维护，且只能绑定一个处理函数。 -
DOM元素事件属性（如
btn.onclick = handleClick）：简洁但同样不支持多个监听器，后赋值会覆盖前一个。 -
addEventListener()：标准推荐方式，可为同一事件添加多个监听器，支持捕获/冒泡阶段控制，还能通过选项精细配置（如
{ once: true }、{ passive: true }）。
用 addEventListener 添加事件监听
基本语法：element.addEventListener(type, listener, options?)
-
type：字符串，如
"click"、"input"、"keydown"，不带on前缀。 -
listener：回调函数，接收一个
Event对象参数，可从中获取触发细节（如鼠标位置、按键码、目标元素等）。 -
options：可选对象，常用键包括：
once（只执行一次）、capture（在捕获阶段触发）、passive（告诉浏览器该监听器不会调用preventDefault()，提升滚动性能）。
示例：
立即学习“Java免费学习笔记（深入）”；
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function(e) {
console.log("按钮被点击了", e.target);
});
// 或使用箭头函数（注意 this 指向差异）
btn.addEventListener("click", (e) => {
e.preventDefault(); // 阻止默认行为（如果适用）
});
事件流与事件委托
点击一个嵌套元素时，事件会按顺序经历三个阶段：捕获 → 目标 → 冒泡。默认监听器在冒泡阶段触发（即从子元素向上到父元素）。利用冒泡特性，可在父容器上监听子元素事件——这就是事件委托，特别适合动态添加的元素或大量同类元素。
- 给父级（如
<ul>）绑定"click"监听器。 - 在回调中检查
e.target是否为期望的子元素（如e.target.tagName === "LI"）。 - 无需为每个子项单独绑定，节省内存，也避免重复绑定逻辑。
移除监听器要注意什么？
用 removeEventListener() 移除时，必须传入与添加时完全相同的函数引用和选项。匿名函数无法被移除，所以需要命名函数或保存函数引用：
- ❌ 错误写法：
el.addEventListener("click", () => {...}); el.removeEventListener("click", () => {...});（两个箭头函数不是同一个引用） - ✅ 正确写法：
const handler = () => {...}; el.addEventListener("click", handler); el.removeEventListener("click", handler); - 若用了
{ once: true }，则无需手动移除，执行一次后自动解绑。
基本上就这些。掌握 addEventListener 的用法、理解事件流、善用事件委托，就能应对绝大多数交互场景。不复杂但容易忽略细节，比如 options 配置或移除监听器的引用一致性。
