事件类型
用户界面事件在何时触发？
| 事件 | 触发时机与目标 |
|---|---|
load | 整个页面加载完成后在 window 触发 |
unload | 文档卸载后在 window 触发 |
resize | 浏览器窗口缩放时在 window 触发 |
scroll | 元素滚动时触发 |
焦点事件有什么区别？
| 事件 | 触发时机 | 是否冒泡 |
|---|---|---|
focus | 元素获得焦点 | 否 |
focusin | 元素获得焦点 | 是 |
blur | 元素失去焦点 | 否 |
focusout | 元素失去焦点 | 是 |
HTML5 新增了哪些常用事件？
| 事件 | 触发时机 |
|---|---|
contextmenu | 显示上下文菜单, 冒泡 |
beforeunload | 页面卸载前在 window 触发 |
DOMContentLoaded | DOM 树构建完成后在 window/document 触发 |
pageshow | load 之后页面显示时在 window 触发 |
pagehide | 页面卸载后、unload 前在 window 触发 |
hashchange | URL 的 hash 变化后在 window 触发 |
鼠标事件有哪些, 如何区分？
| 事件 | 触发时机 | 冒泡 |
|---|---|---|
click / dblclick | 单击 / 双击左键 | 是 |
mousedown / mouseup | 按下 / 释放鼠标键 | 是 |
mouseenter / mouseleave | 进入 / 离开元素 | 否 |
mouseover / mouseout | 进入 / 离开元素 (含子元素边界) | 是 |
mousemove | 在元素内移动 | 否 |
mousewheel | 滚动滚轮 | — |
- 位置与状态属性:
clientX/clientY(相对视口)、pageX/pageY(相对页面)、screenX/screenY(相对屏幕); - 修饰键:
shiftKey、ctrlKey、altKey、metaKey; - 按键:
button(0 左键, 1 中键, 2 右键)、buttons(位掩码)、relatedTarget(关联元素)、wheelDelta(滚动量); - 坐标换算: 未滚动时
clientX与pageX相同; 滚动时pageX = clientX + body.scrollX(纵向同理);
键盘事件有哪些, 如何读取按键？
| 事件 | 触发时机 |
|---|---|
keydown | 按下按键, 持续按住会重复触发 |
keypress | 按键并产生字符, 持续按住会重复触发 |
keyup | 释放按键 |
textInput | 可编辑区域中插入新字符时触发 |
- 常用属性:
key(按键字符值)、code(物理键位)、keyCode、charCode, 以及四个修饰键布尔值;