基础语法
事件机制是指当用户在DOM元素上执行特定操作（例如点击按钮、移动鼠标等）时，会触发相应的事件。JavaScript通过监听这些事件，并将对应的处理函数绑定到事件上，从而对用户的交互做出响应。
javascript
// 1. HTML属性方式（内联方式）
<div class="event-box" onclick="alert('HTML属性方式')">HTML属性方式</div>
// 2. DOM属性方式绑定事件
<div class="event-box" id="domPropertyBox">DOM属性方式</div>
domPropertyBox.onclick = function () {
logEvent('DOM属性方式触发了点击事件')
}
// 3. addEventListener方式绑定事件（推荐）
<div class="event-box" id="listenerBox">addEventListener方式</div>
listenerBox.addEventListener('click', function () {
logEvent('addEventListener方式触发了点击事件')
})不同事件绑定方式的特性如下：
| 特性 | HTML属性方式 | DOM属性方式 | addEventListener |
|---|---|---|---|
| 多个事件处理器 | ❌ | ❌ | ✅ |
| 控制事件阶段 | ❌ (只冒泡) | ❌ (只冒泡) | ✅ (可选捕获/冒泡) |
| 移除事件 | 困难 | 设置为null | removeEventListener |
| 代码组织 | 混合在HTML中 | 分离 | 完全分离 |
| this指向 | window | 元素本身 | 元素本身 |
可列举的事件类型：
| 事件类型 | 事件名称 | 描述 |
|---|---|---|
| 鼠标事件 | click | 单击事件 |
| dblclick | 双击事件 | |
| contextmenu | 右键点击事件 | |
| mousedown | 鼠标按下事件 | |
| mouseup | 鼠标释放事件 | |
| mouseover | 鼠标移入元素事件 | |
| mouseout | 鼠标移出元素事件 | |
| mousemove | 鼠标在元素上移动事件 | |
| 键盘事件 | keydown | 键盘按键按下事件 |
| keyup | 键盘按键释放事件 | |
| keypress | 键盘按压事件（字符键） | |
| 表单事件 | submit | 表单提交事件 |
| reset | 表单重置事件 | |
| focus | 获得焦点事件 | |
| blur | 失去焦点事件 | |
| input | 输入内容变化事件 | |
| change | 内容改变且失去焦点事件 | |
| 拖放事件 | dragstart | 开始拖动元素 |
| drag | 拖动元素过程中 | |
| dragend | 拖动操作结束 | |
| dragenter | 拖动元素进入目标区域 | |
| dragover | 拖动元素在目标区域上方 | |
| dragleave | 拖动元素离开目标区域 | |
| drop | 在目标区域放置被拖元素 | |
| 滚动事件 | scroll | 元素或文档被滚动 |
| 剪贴板事件 | copy | 复制操作 |
| cut | 剪切操作 | |
| paste | 粘贴操作 | |
| 触摸事件 (移动端) | touchstart | 触摸开始 |
| touchmove | 触摸移动 | |
| touchend | 触摸结束 | |
| touchcancel | 触摸被系统中断 | |
| 窗口/文档事件 | resize | 窗口大小改变 |
| load | 页面加载完成 |
事件捕获与冒泡
在JavaScript中，事件的传播过程遵循事件流机制，事件流的顺序包括捕获和冒泡两种方式。整个事件流可以分为三个阶段：首先是 捕获阶段 ，然后是 目标阶段 ，最后是 冒泡阶段。事件捕获和事件冒泡是处理DOM事件的两种不同机制。
- 事件捕获是从最外层的元素开始，逐步向内传播到目标元素。例如：从
window到document，再到html、body，最终到达div - 事件冒泡则是从目标元素开始，逐步向外传播到最外层的元素。例如：从
div到body，再到html、document，最终到达window
javascript
element.addEventListener(event, handler, useCapture);
// event：具体的事件
// handler：处理的函数
// 指定什么事件：默认为false，事件在冒泡阶段处理
event.preventDefault() // 阻止浏览器对事件的默认行为，
// 如：阻止链接的跳转、表单的提交、输入框的默认行为
event.stopPropagation() //阻止事件冒泡，同级不阻止
event.stopImmediatePropagation() //阻止事件冒泡，同级阻止案例如下
事件委托
- 事件委托（Event Delegation） 是一种基于事件冒泡机制的优化技术。它允许我们将事件监听器添加到父元素，而不是直接添加到多个子元素上。
- 当子元素的事件被触发时，事件会冒泡到父元素，然后由父元素上的监听器处理。通过检查事件的target属性，我们可以确定哪个具体的子元素触发了事件。
javascript
//事件代理 节约内存 提升性能(不需要注销子节点)
let ul = document.getElementById("ul");
ul.addEventListener("click", (event) => {
console.log(event.target.innerHTML);
})案例如下
| 特性 | 事件委托 | 直接绑定 |
|---|---|---|
| 内存使用 | ✅ 低（只有一个事件监听器） | ❌ 高（每个元素一个监听器） |
| 初始化时间 | ✅ 快（只需绑定一次） | ❌ 慢（需要为每个元素绑定） |
| 动态元素处理 | ✅ 自动支持新添加的元素 | ❌ 需要手动为新元素绑定事件 |
| 事件处理时间 | ⚠️ 稍慢（需要遍历确定目标元素） | ✅ 稍快（直接知道目标元素） |
| 代码复杂度 | ✅ 简洁 | ❌ 冗余 |
| 元素移除 | ✅ 不需要手动解绑 | ❌ 需要手动解绑避免内存泄漏 |
| 点击性能测试 | ⚠️ 稍慢（需要判断目标元素） | ✅ 稍快（直接绑定到目标元素） |
VUE 事件系统
www.cnblogs.com/WindrunnerM...
Vue中通过 v-on 或其语法糖 @ 指令来给元素绑定事件并且提供了事件修饰符，基本流程是进行模板编译生成 AST ，生成render函数后并执行得到VNode，VNode 生成真实DOM 节点或者组件时候使用addEventListener方法进行事件绑定。
下一篇会对 VUE 的事件系统将进行详细讲解......