javaScript事件——鼠标与滚轮事件

以下事件中,没有说明键盘能触发的表示键盘不能触发,没有指明不冒泡的表示冒泡。

  1. click:单击事件,Enter 键也能触发。
  2. dblclick:双击事件。
  3. mousedown:鼠标按下事件,任意鼠标按钮被按下都能触发。
  4. mouseup:任意鼠标按钮被释放时触发。
  5. mouseenter:光标首次进入到某一元素内部时触发。无论光标有没有直接在此元素上,只要光标进入它的边界,则触发。不冒泡。
  6. mouseleave:光标离开元素内部时触发。不冒泡。
  7. mousemove:光标在元素内部移动时重复触发。
  8. mouseout:光标离开元素或其子元素时触发。比如海中有一个岛(子元素),人是光标,人爬上岛或到陆地上都会触发此事件。
  9. mouseover:光标进入元素或其子元素时触发。

疑难事件:

mouseenter,mouseleave 与 mouseover,mouseout容易混淆,下面的例子可以帮助理解。

mouseenter 事件触发次数:0

mouseover 事件触发次数:0

以上事件全部是加载在浅灰色的 div 中。观察可以发现:

mouseenter 事件只在光标进入元素边界时触发,移入和移出其子元素,不再触发;而 mouseover 事件,当光标移入元素时触发,移入其子元素也触发(子子元素同样触发),同时当光标从子元素移出,这时候如果落在了事件元素上,也是一次 over,同理光标从子子元素出来落在子元素上,也是一次over——可以这样理解,每当光标穿过内部元素边界时都会触发mouseover事件。

mouseover 的这种机制很少用到。早些时候有些浏览器不支持 mouseenter 和 mouseleave 事件,只有 mouseover 和 mouseout 。其实我觉得按照工具的一般设计方法,应当提供最小功能集,跟精简指令集一样,over 和 out 没有必要存在——完全可以用 mouseenter 和 mouseleave 写出 mouseover 和 mouseout 的功能(如果后面这种变态功能真的需要的话)


原文地址:https://www.cnblogs.com/magma/p/4152919.html