细数那些事件类型
- UI事件
- 焦点事件
- 鼠标与滚轮事件
- 键盘与文本事件
- 复合事件
- 变动事件
- HTML5事件
- 设备事件
- 触摸和手势事件
UI事件
常见的有 load unload abort error select resize scroll
焦点事件
blur 不会冒泡
focus 不会冒泡
focusin 冒泡
focusout
鼠标与滚轮事件
click : 点击
dblclick: 双击
mousedown: 鼠标按下
mouseenter： 鼠标光标进入元素区域
mouseleave： 鼠标光标移出元素区域, 当前元素触发
mousemove: 鼠标在元素内部移动
mouseout: 鼠标移动到另一个元素上 , 冒泡触发
mouseover: 在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发
mouseup: 鼠标释放
事件依赖顺序
(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick
tips
event.clientX,event.clientY 在可视区域下的位置
event.pageX,event.pageY 在整个页面你的位置
screenX, screenY 屏幕坐标的位置
修改键
event.shiftKey , event.ctrlKey, event.altKey... 值为true则表示此键被按下了
鼠标按钮
event.button
0：表示没有按下按钮。
1：表示按下了主鼠标按钮。
2：表示按下了次鼠标按钮。
3：表示同时按下了主、次鼠标按钮。
4：表示按下了中间的鼠标按钮。
5：表示同时按下了主鼠标按钮和中间的鼠标按钮。
6：表示同时按下了次鼠标按钮和中间的鼠标按钮。
7：表示同时按下了三个鼠标按钮。
键盘与文本事件
keydown: 按下键盘任意键触发
keypress： 当用户键盘上的字符时触发
keyup: 当用户释放键盘上的键时触发
HTML5事件
contextmenu 上下文菜单事件
beforeunload 页面卸载前执行
event.returnValue = message;
return message;
DOMContentLoaded事件
window的load事件会在页面中的一切都加载完毕时触发 | 而 DOMContentLoaded 会在DOM树之后就会触发，不会理会图像、javascript、CSS文件...
readystatechange事件
loading 正在加载中
loaded 加载完毕
interactive 交互，可以操作对象
complete 加载完成
设备事件|触发与手势事件【后续补充】