11月2日
1. 事件监听器 addEventListener
document.addEventListener(eventName, callbackFunction, options);
- eventName：字符串，指定监听的事件类型。
- callbackFunction：事件触发时执行的函数（此处为箭头函数 () => { ... }）。
- options（可选）：配置对象，如 { once: true } 表示只执行一次。
2. 常见的监听事件类型
- 鼠标事件（Mouse Events）
| 事件名 | 触发时机 |
|---|---|
click | 鼠标点击（按下+释放）时触发 |
dblclick | 鼠标双击时触发 |
mousedown | 鼠标按下时触发 |
mouseup | 鼠标释放时触发 |
mousemove | 鼠标移动时持续触发 |
mouseenter | 鼠标进入元素范围时触发（不冒泡） |
mouseleave | 鼠标离开元素范围时触发（不冒泡） |
mouseover | 鼠标进入元素范围时触发（会冒泡） |
mouseout | 鼠标离开元素范围时触发（会冒泡） |
contextmenu | 右键菜单被打开时触发 |
- 键盘事件（Keyboard Events）
| 事件名 | 触发时机 |
|---|---|
keydown | 按下键盘按键时触发（持续触发） |
keypress | 按下字符键时触发（已废弃） |
keyup | 松开键盘按键时触发 |
- 触摸事件（Touch Events，移动端）
| 事件名 | 触发时机 |
|---|---|
touchstart | 手指触摸屏幕时 |
touchmove | 手指在屏幕上滑动时 |
touchend | 手指离开屏幕时 |
touchcancel | 系统取消触摸事件时（如来电中断） |
- 窗口与文档事件（Window & Document）
| 事件名 | 触发时机 |
|---|---|
load | 页面加载完成 |
DOMContentLoaded | DOM 结构加载完成（不等图片等资源） |
resize | 窗口大小变化时 |
scroll | 页面滚动时 |
unload | 页面卸载前（现代浏览器多已禁用） |
beforeunload | 页面即将关闭或刷新时（可提示保存） |
visibilitychange | 页面可见性变化（切换标签页等） |
- 表单事件（Form Events）
| 事件名 | 触发时机 |
|---|---|
input | 输入框内容变化时 |
change | 表单元素值改变且失焦时 |
focus | 元素获得焦点 |
blur | 元素失去焦点 |
submit | 表单提交时 |
reset | 表单重置时 |
- 剪贴板事件（Clipboard Events）
| 事件名 | 触发时机 |
|---|---|
copy | 复制操作时 |
cut | 剪切操作时 |
paste | 粘贴操作时 |
- 媒体事件（Media Events）
| 事件名 | 触发时机 |
|---|---|
play | 媒体开始播放 |
pause | 媒体暂停 |
ended | 播放结束 |
timeupdate | 播放时间更新 |
volumechange | 音量变化 |
loadeddata | 数据加载完成 |
- 拖拽事件（Drag & Drop Events）
| 事件名 | 触发时机 |
|---|---|
dragstart | 开始拖拽 |
drag | 拖拽中 |
dragenter | 拖拽目标进入可放置区域 |
dragover | 拖拽目标悬停在可放置区域上 |
dragleave | 拖拽目标离开可放置区域 |
drop | 拖拽目标放下时 |
dragend | 拖拽操作结束时 |
- 自定义事件（Custom Events）
示例
const myEvent = new CustomEvent("myCustomEvent", { detail: { msg: "Hello" } });
document.addEventListener("myCustomEvent", e => console.log(e.detail.msg));
document.dispatchEvent(myEvent);
第一行
const myEvent = new CustomEvent("myCustomEvent", { detail: { msg: "Hello" } });
解释：
CustomEvent 是一个内置构造函数，用来创建自定义事件对象。
"myCustomEvent" 是事件名，可以随意取（只要你在监听时用同样的名字）。
第二个参数是一个配置对象 { detail: {...} }，用于传递自定义数据。
这里创建了一个名为 "myCustomEvent" 的事件，并附带了一个自定义数据对象：
detail: { msg: "Hello" }
detail 就是自定义事件中存放额外数据的标准属性。
第二行
document.addEventListener("myCustomEvent", e => console.log(e.detail.msg));
解释：
这行代码为 document 注册了一个监听器，当 "myCustomEvent" 被触发时执行回调。
e 是事件对象。
e.detail 就是前面定义事件时传入的自定义数据对象 { msg: "Hello" }。
所以 e.detail.msg 取到 "Hello"。
第三行
document.dispatchEvent(myEvent);
解释：
dispatchEvent() 会触发事件。
当执行这行代码时：
浏览器在 document 上触发 "myCustomEvent"。
前面注册的监听器会被调用。
控制台输出：
Hello
总结执行流程
- 创建一个自定义事件对象（myEvent）并附带数据。
- 监听该事件。
- 触发该事件（dispatchEvent）。
- 监听器捕获事件并读取 detail 中的数据。