js常见的鼠标事件以及mouseenter与mouseover区别

172 阅读2分钟

1. ‌点击事件:

  • click: 当用户单击鼠标左键时触发。适用于按钮或链接的点击处理逻辑‌。
  • dblclick:当用户双击鼠标左键时触发。适用于需要双击激活的功能,如编辑文本或打开详细信息视图‌。

2. ‌鼠标按下和松开事件:

  • mousedown:当用户按下鼠标按钮时触发。可以是左键右键中键‌
  • mouseup:当用户释放鼠标按钮时触发‌。

3. ‌鼠标移动事件:

  • mousemove:当鼠标指针在元素上移动反复触发。这个事件触发非常频繁,可能会影响性能,应谨慎使用‌。
  • mouseenter:当鼠标指针进入一个节点时触发,不冒泡‌
  • mouseleave:当鼠标指针离开一个节点时触发,不冒泡‌
  • mouseover:当鼠标指针进入元素内部时触发‌。
  • mouseout:当鼠标指针离开元素时触发‌。

4. ‌滚轮事件:

  • ‌wheel:当用户滚动鼠标滚轮时触发。可以获取滚轮滚动的方向距离‌
  • ‌DOMMouseScroll(已弃用):仅限Firefox,现在应使用wheel事件‌。

5. ‌其他事件:

  • contextmenu:当用户点击鼠标右键时触发,通常用于显示自定义右键菜单‌。
  • selectstart:当用户开始选择文本时触发‌。
  • selectend:当用户结束选择文本时触发‌。

mouseenter与mouseover的区别

mouseenter: 鼠标进入被绑定事件监听元素节点时触发一次,再次触发是鼠标移出被绑定元素再次进入时。而当鼠标进入被绑定元素节点触发一次后没有移出,即使鼠标动了也不再触发。

mouseover: 鼠标进入被绑定事件监听元素节点时触发一次,如果目标元素包含子元素,鼠标移出子元素到目标元素上也会触发。

mouseenter 不支持事件冒泡 mouseover 会冒泡