JavaScript事件机制通过捕获与冒泡阶段实现交互，使用addEventListener绑定监听器，利用event对象获取触发元素并控制行为，结合事件委托提升性能。
JavaScript事件机制是实现网页交互的核心部分，它让开发者能够响应用户的操作，比如点击、输入、滚动等行为。理解事件机制的工作原理，有助于写出更高效、可靠的交互代码。
事件的基本概念
事件是用户或浏览器自身执行某种动作时触发的信号。例如点击按钮会触发 click 事件，页面加载完成会触发 load 事件。每个事件都与特定的DOM元素相关联。
要实现交互，需要为元素绑定事件处理函数。常见的绑定方式有：
- 在HTML中使用内联事件属性，如 onclick="handleClick()"
- 通过JavaScript设置元素的事件属性，如 element.onclick = function(){}
- 使用 addEventListener 方法添加监听器，推荐方式，支持多个监听器
事件流：捕获与冒泡
当事件发生在嵌套的DOM元素上时，事件会按照特定顺序传播，这个过程称为事件流。事件流分为三个阶段：
立即学习“Java免费学习笔记（深入）”；
- 捕获阶段：从最外层 window 向目标元素传递
- 目标阶段：到达绑定事件的实际元素
- 冒泡阶段：从目标元素向上传播回顶层
默认情况下，事件监听器在冒泡阶段执行。若希望在捕获阶段处理事件，可将 addEventListener 的第三个参数设为 true。
事件对象与常用操作
当事件被触发时，浏览器会自动传入一个事件对象（通常命名为 event 或 e），它包含事件的详细信息，如触发元素、鼠标位置、按键值等。
常见用法包括：
- event.target 获取实际触发事件的元素（可能不同于监听器绑定的元素）
- event.preventDefault() 阻止默认行为，如阻止表单提交或链接跳转
- event.stopPropagation() 阻止事件继续传播，避免触发父级元素的监听器
事件委托：提升性能的技巧
对于动态生成的内容或多元素监听场景，逐个绑定事件会影响性能。事件委托利用事件冒泡机制，在父级元素上统一处理子元素的事件。
例如，一个列表有很多项，可以只为父 ul 添加一个监听器，通过判断 event.target 来识别具体点击的是哪个 li。这样即使新增列表项，也不需重新绑定事件。
基本上就这些。掌握事件机制，就能构建出响应灵敏、逻辑清晰的网页交互功能。不复杂但容易忽略细节，比如冒泡控制和事件对象的使用。
