以下是一些常见的鼠标事件和相应的JavaScript代码示例:
- click事件:当鼠标点击元素时触发。
javascript
document.getElementById("myButton").addEventListener("click", function() {
console.log("Button clicked!");
});
- mouseover事件:当鼠标移动到元素上方时触发。
javascript
document.getElementById("myDiv").addEventListener("mouseover", function() {
console.log("Mouse over the div!");
});
- mouseout事件:当鼠标离开元素时触发。
javascript
document.getElementById("myDiv").addEventListener("mouseout", function() {
console.log("Mouse out of the div!");
});
- mousedown事件:当鼠标按下元素时触发。
javascript
document.getElementById("myButton").addEventListener("mousedown", function() {
console.log("Mouse button down!");
});
- mouseup事件:当鼠标释放元素时触发。
javascript
document.getElementById("myButton").addEventListener("mouseup", function() {
console.log("Mouse button up!");
});
- mousemove事件:当鼠标在元素上移动时触发。
javascript
document.getElementById("myDiv").addEventListener("mousemove", function(event) {
console.log("Mouse position: " + event.clientX + ", " + event.clientY);
});
以上示例仅为常见的鼠标事件,尚有其他事件和更复杂的用法。使用addEventListener函数可以将事件处理程序添加到元素中。事件处理程序是一个函数,当事件发生时会被触发。在事件处理程序中,可以执行任何JavaScript代码。