Javascript基础系列(十二)-DOM事件类型

细数那些事件类型

• 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 加载完成

设备事件|触发与手势事件【后续补充】