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 会冒泡