JS鼠标事件有很多,以下是一些常见的例子,并根据其功能进行了大致的分类:
鼠标点击事件:
click: 当用户点击鼠标左键时触发。这是最常用的点击事件。
dblclick: 当用户双击鼠标左键时触发。
mousedown: 当用户按下鼠标按钮(左键、右键或中键)时触发。
mouseup: 当用户释放鼠标按钮(左键、右键或中键)时触发。
contextmenu: 当用户点击鼠标右键(或在键盘上按下上下文菜单键)时触发。通常用于显示自定义右键菜单,可以通过preventDefault()方法阻止默认的上下文菜单。
鼠标移动事件:
mousemove: 当鼠标指针在元素上移动时反复触发。需要注意的是,这个事件触发非常频繁,可能会影响性能,因此应谨慎使用。
mouseover: 当鼠标指针从元素外部移入元素内部时触发。
mouseout: 当鼠标指针从元素内部移出元素外部时触发。
mouseenter: 当鼠标指针进入元素时触发。与mouseover的区别在于,mouseenter不会冒泡。
mouseleave: 当鼠标指针离开元素时触发。与mouseout的区别在于,mouseleave不会冒泡。
鼠标滚轮事件:
wheel: 当用户滚动鼠标滚轮时触发。可以获取滚轮滚动的方向和距离。
DOMMouseScroll (已弃用,仅限Firefox): Firefox旧版本使用的滚轮事件,现在应该使用wheel。
其他鼠标事件:
selectstart: 当用户开始选择文本时触发。
selectend: 当用户结束选择文本时触发。
一个简单的click事件例子:
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked!");
});
mousemove事件的例子 (注意性能问题):
const div = document.getElementById("myDiv");
div.addEventListener("mousemove", function(event) {
console.log("Mouse X: " + event.clientX + ", Mouse Y: " + event.clientY);
});
希望这些例子能帮助你理解JS鼠标事件。 记住,根据你的具体需求选择合适的事件类型,并注意潜在的性能问题。