事件类型
- 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方向上的偏移量