DOM事件
DOM事件：DOM 事件是指浏览器中用户与页面交互或浏览器自身行为发生时触发的信号，你可以通过 JavaScript 监听这些信号并执行相应的代码。
通俗理解
把 DOM 事件想象成"通知"：
| 场景 | 触发的"通知"（事件） |
|---|---|
| 用户点击按钮 | click |
| 鼠标移到一个元素上 | mouseenter |
| 键盘按下一个键 | keydown |
| 页面加载完成 | load |
| 输入框内容改变 | input/change |
| 表单提交 | submit |
基本用法（三种绑定方式）
1. HTML 属性方式（不推荐）
html
<button οnclick="alert('点击了')">点我</button>2. DOM 属性方式
javascript
const btn = document.getElementById('myBtn'); btn.onclick = function() { alert('点击了'); };3. 标准方式：addEventListener（推荐）
javascript
const btn = document.getElementById('myBtn'); btn.addEventListener('click', function() { alert('点击了'); });🔄 事件流（捕获 → 目标 → 冒泡）
当你点击一个嵌套的元素时，事件会经历三个阶段：
text
1. 捕获阶段（从外到内） document → html → body → div → button 2. 目标阶段（到达目标） button（被点击的元素） 3. 冒泡阶段（从内到外） button → div → body → html → document
html
<div id="parent"> <button id="child">点我</button> </div>
javascript
// 默认是冒泡阶段（第三个参数 false 或不写） document.getElementById('parent').addEventListener('click', function() { console.log('父元素被点击了'); }, false); // false = 冒泡阶段 // 捕获阶段（第三个参数 true） document.getElementById('parent').addEventListener('click', function() { console.log('父元素捕获到了'); }, true); // true = 捕获阶段🚫 阻止事件行为
| 方法 | 作用 |
|---|---|
event.stopPropagation() | 阻止事件继续传播（阻止冒泡或捕获） |
event.preventDefault() | 阻止元素的默认行为（如链接跳转、表单提交） |
javascript
document.getElementById('link').addEventListener('click', function(event) { event.preventDefault(); // 阻止跳转 event.stopPropagation(); // 阻止冒泡 console.log('点击了链接，但没有跳转'); });🧩 常见 DOM 事件分类
| 类别 | 事件名 | 触发时机 |
|---|---|---|
| 鼠标 | click,dblclick,mousedown,mouseup,mousemove,mouseenter,mouseleave | 鼠标操作 |
| 键盘 | keydown,keyup,keypress | 键盘操作 |
| 表单 | input,change,submit,focus,blur | 表单交互 |
| 窗口 | load,resize,scroll,unload | 页面/窗口变化 |
| 触摸 | touchstart,touchmove,touchend | 移动端触屏 |
| 剪贴板 | copy,cut,paste | 复制/粘贴 |