Javascript 简明教程
JavaScript - Mouse Events
JavaScript 鼠标事件允许用户使用鼠标控制和与网页进行互动。这些事件会响应用户的点击、滚动、拖动和其他鼠标移动操作来触发特定功能或动作。
JavaScript mouse events allow users to control and interact with web pages using their mouse. These events trigger specific functions or actions in response to user clicks, scrolls, drags, and other mouse movements.
要处理 JavaScript 中的鼠标事件，您可以使用 addEventListener() 方法。addEventListener() 方法接受两个参数：事件类型和事件处理程序函数。事件类型是您想要处理的事件的名称，事件处理程序函数是在事件发生时所调用的函数。
To handle mouse events in JavaScript, you can use the addEventListener() method. The addEventListener() method takes two arguments: the event type and the event handler function. The event type is the name of the event that you want to handle, and the event handler function is the function that will be called when the event occurs.
在 Web 开发中，JavaScript 通过一系列事件提供了一种强大的机制来响应用户的鼠标互动操作。通过捕获和处理各种与鼠标相关的操作，这些事件使开发者能够创建动态且具有交互性的 Web 应用程序。
In web development, JavaScript provides a powerful mechanism to respond to user interactions with the mouse through a set of events. These events enable developers to create dynamic and interactive web applications by capturing and handling various mouse-related actions.
Common Mouse Events
以下是 JavaScript 中最常见的几种鼠标事件：
Following are the most common JavaScript mouse events:
Mouse Event |
Description |
Click |
When an element experiences the press of a mouse button, it triggers the click event. |
Double Click |
The dblclick event fires upon the rapid double-clicking of a mouse button. |
Mouse Down and Mouse Up |
The initiation of a mouse click triggers the 'mousedown' event, while the completion of that click causes the 'mouseup' event to occur. |
Mouse Move |
When the mouse pointer moves over an element, it triggers the 'mousemove' event; this event supplies developers with positional information about the mouse. This data empowers them to devise responsive interfaces that are rooted in dynamic mouse movements. |
Context Menu |
When the user attempts to open the context menu, typically by right-clicking, they trigger the contextmenu event. This event allows developers to customize or inhibit default behaviour of the context menu. |
Wheel |
When the mouse wheel rotates, it fires the 'wheel event'; this particular event commonly manifests in implementing features, notably zooming or scrolling. |
Drag and Drop |
Events like dragstart, dragend, dragover, dragenter, dragleave, and drop are associated with drag-and-drop functionality. They allow developers to create interactive interfaces for dragging elements within a web page. |
Example : Click Event
在这个例子中，我们演示 click 事件。当按钮被点击时，它向控制台信息打印一个合适的消息，即“点击！”。这个事件经常在提交表单时使用。
In this example we demonstrate the click event. When the button is clicked, it prints an appropriate message to the console message i.e. “Clicked!”. This event is often used while submitting forms.
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
</head>
<body>
<button id="clickButton">Click me!</button>
<p id = "output"></p>
<script>
const clickButton = document.getElementById('clickButton');
const outputDiv = document.getElementById("output");
clickButton.addEventListener('click', function(event) {
outputDiv.innerHTML += 'Clicked!'+ JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>Example: Double Click Event
此例中 dblclick 事件会操作，在指定的按钮被双击时触发。我们将事件侦听器附加到一个 ID 为“doubleClickButton”的元素。用户双击按钮时会提示一个记录控制台消息的功能，该消息确认了他们与按钮的交互。
The dblclick event operates in this example, triggering upon a double-click of the designated button. We attach the event listener to an element with "doubleClickButton" as its id. A user’s double-click on the button prompts a function that logs a console message, confirming their interaction with it.
<!DOCTYPE html>
<html>
<head>
<title>Double Click Event Example</title>
</head>
<body>
<button id="doubleClickButton">Double-click me!</button>
<p id = "output"></p>
<script>
const doubleClickButton = document.getElementById('doubleClickButton');
const outputDiv = document.getElementById("output");
doubleClickButton.addEventListener('dblclick', function(event) {
outputDiv.innerHTML += 'Double-clicked!' + JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>Example: Mouse Down and Mouse Up Events
在此场景中，mousedown 和 mouseup 事件的使用得到了体现：这两个事件都应用于一个被标识为“mouseUpDownDiv”的 <div> 元素。建立了两个不同的事件侦听器；一个响应鼠标按钮的向下操作，而另一个响应该按钮的释放或向上运动。在按压指定的 div（mousedown）时，一条消息会出现在你的控制台日志中，表明用户已经按下了鼠标按钮。当用户释放鼠标按钮（mouseup）时，我们还会记录另一条消息来表明鼠标按钮已经抬起。
The use of the mousedown and mouseup events is exemplified in this scenario: both events apply to a <div> element identified as "mouseUpDownDiv." Two distinct event listeners are established; one responds to the down action of the mouse button, while another reacts upon release or up motion of said button. Upon pressing over the designated div (mousedown), a message indicating that the user has depressed their mouse button appears within your console log. When the user releases the mouse button (mouseup), we also log another message to indicate that the mouse button is up.
<!DOCTYPE html>
<html>
<head>
<title>Mouse Down and Mouse Up Events Example</title>
</head>
<body>
<div id="mouseUpDownDiv"
style="width: 600px; height: 100px; background-color: lightblue;">
Please perform mouse down and up event any where in this DIV.
</div>
<p id = "output"></p>
<script>
const mouseUpDownDiv = document.getElementById('mouseUpDownDiv');
const outputDiv = document.getElementById("output");
mouseUpDownDiv.addEventListener('mousedown', function(event) {
outputDiv.innerHTML += 'Mouse button down!' + JSON.stringify(event) + "<br>";
});
mouseUpDownDiv.addEventListener('mouseup', function(event) {
outputDiv.innerHTML += 'Mouse button up!' + JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>Example: Mouse Move Event
在这个实例中，我们使用 mousemove 事件来监视鼠标指针在被标识为“mouseMoveDiv”的特定 <div> 元素上的移动。处理程序功能从表示指针 X-Y 坐标的事件对象中提取 clientX 和 clientY 属性。后来，这些属性被记录到控制台中；从而在用户将光标定位在指定的 div 区域中的确切位置上提供实时反馈。
In this instance, we employ the mousemove event to monitor the mouse pointer’s movement over a specific <div> element identified as "mouseMoveDiv." The handler function extracts clientX and clientY properties from an event object that represents X-Y coordinates of said pointer. Subsequently, these are logged into console; thus offering real-time feedback on where exactly within our designated div area is the user positioning their cursor.
<!DOCTYPE html>
<html>
<head>
<title>Mouse Move Event Example</title>
</head>
<body>
<div id="mouseMoveDiv"
style="width: 600px; height: 200px; background-color: lightgreen;">
Please move you mouse inside this DIV.</div>
<p id = "output"></p>
<script>
const mouseMoveDiv = document.getElementById('mouseMoveDiv');
const outputDiv = document.getElementById("output");
mouseMoveDiv.addEventListener('mousemove', function(event) {
const x = event.clientX;
const y = event.clientY;
outputDiv.innerHTML += `Mouse moved to (${x}, ${y})` + JSON.stringify(event) + "<br>";
});
</script>
</body>
</html>Example: Wheel Event
此示例展示了 wheel 事件，该事件在鼠标滚轮转动时被激活。事件侦听器被附加到一个 ID 为“wheelDiv”的 <div> 元素。当用户在这个 div 上转动鼠标滚轮时，关联的功能会向控制台记录一条消息，表明鼠标滚轮已经转动。
This example showcases the wheel event, activated when the mouse wheel is rotated. The event listener is attached to a <div> element with the id "wheelDiv." When the user rotates the mouse wheel over this div, the associated function logs a message to the console, indicating that the mouse wheel has been rotated.
<!DOCTYPE html>
<html>
<head>
<title>Wheel Event Example</title>
</head>
<body>
<div id="wheelDiv"
style="width: 600px; height: 200px; background-color: palevioletred;">
Please bring the curser inside this DIV and rotate the wheel of mouse.</div>
<p id = "output"></p>
<script>
const wheelDiv = document.getElementById('wheelDiv');
const outputDiv = document.getElementById("output");
wheelDiv.addEventListener('wheel', function(event) {
outputDiv.innerHTML += 'Mouse wheel rotated!'+ event + "<br>";
});
</script>
</body>
</html>