JS—事件类型(焦点事件、鼠标事件(部分))

JavaScript010

JS—事件类型(焦点事件、鼠标事件(部分)),第1张

【需要注意】虽然focus与blur不冒泡,但是却可以在捕获阶段侦听到它们。

只定义了div2即棕色的那个div的事件

【解释enter与leave】:当鼠标由粉移向棕色时,显示enter,鼠标由棕移向绿时,不显示leave与enter。当移出粉色时,显示leave。

【解释over与out】:当鼠标由粉移向棕色时,显示over,鼠标由棕移向绿时,显示out在显示over,鼠标由绿移向棕时,显示out载显示over。为什么会显示呢?是因为事件冒泡,由棕移向绿时会触发div3的over事件,但是div3并没有定义,所以向上冒泡到div2。所以会显示div2的over事件。

【总结】mouseenter与mouseleave是IE提出的事件,不冒泡。但是mouseover与mouseout事件则通过简单的e.stopPropagation()也无法避免冒泡的现象。

一般事件onclickIE3、N2鼠标点击时触发此事件

ondblclickIE4、N4鼠标双击时触发此事件

onmousedownIE4、N4按下鼠标时触发此事件

onmouseupIE4、N4鼠标按下后松开鼠标时触发此事件

onmouseoverIE3、N2当鼠标移动到某对象范围的上方时触发此事件

onmousemoveIE4、N4鼠标移动时触发此事件

onmouseoutIE4、N3当鼠标离开某对象范围时触发此事件

onkeypressIE4、N4当键盘上的某个键被按下并且释放时触发此事件.

onkeydownIE4、N4当键盘上某个按键被按下时触发此事件

onkeyupIE4、N4当键盘上某个按键被按放开时触发此事件

eventType共有5种类型:

上述加粗的是经常会用到的事件类型

以 eventType=MouseEvents ,触发事件为 click 为例: