DOM编程-事件（四）

事件类型

• Event: load unload error select abort
• UIEvent: resize scroll
• FocusEvent: blur focus focusin focusout
• InputEvent: beforeinput input
• KeyboardEvent: keydown keyup
• MouseEvent: click dbclick mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup
• WheelEvent: wheel

注： UIEvent继承自Event，而FocusEvent InputEvent KeyboardEvent MouseEvent WheelEvent继承自UIevent

鼠标事件MouseEvent

事件类型	是否冒泡	元素	默认事件	元素例子
click(单击)	yes	element	focus/activation	div
dbclick(双击)	yes	element	focus/activation select	div
mousedown(按下)	yes	element	frag/scroll text selection	div
mousemove(移动)	yes	element	none	div
mouseout(离开)	yes	element	none	div
mouseover(移入)	yes	element	none	div
mouseup(放开)	yes	element	contest menu	div
mouseenter(进入)	no	element	none	div
mouseleave(离开)	no	element	none	div

辨析：
mouseenter和mouseleave和子元素无关，mouseover和mouseout和子元素有关

MouseEvent对象

属性：

• clientX，clientY，鼠标位置到页面的距离
• screenX，screenY，鼠标位置到屏幕的距离
• ctrlKey，shiftKey, altKey, metaKey,比如当事件触发时shift是按下的，那么shiftKey就是true
• button(0,1,2)，分别代表左键中键右键

MouseEvent顺序：

例子：当元素从A上方移过
mousemove->mouseover(A)->mouseenter(A)->mousemove(A)->mouseout(A)->mouseleave(A)
例子：点击元素
mousedown->[mousemove]->mouseup->click

滚轮事件WheelEvent

事件类型	是否冒泡	元素	默认事件	元素例子
wheel	yes	element	scroll or zoom document	div

滚轮事件对象

属性：

• deltaMode,指定dalta值的单位
• deltaX，x方向上的偏移量
• deltaY，y方向上的偏移量
• dektaZ，z方向上的偏移量