JavaScript - 鼠标事件

上一页
下一页

JavaScript 鼠标事件允许用户使用鼠标控制网页并与之交互。这些事件触发特定的函数或操作，以响应用户的单击、滚动、拖动和其他鼠标移动。

要在 JavaScript 中处理鼠标事件，您可以使用 addEventListener（） 方法。addEventListener（） 方法接受两个参数：事件类型和事件处理程序函数。事件类型是要处理的事件的名称，事件处理程序函数是事件发生时将调用的函数。

在 Web 开发中，JavaScript 提供了一种强大的机制，通过一组事件来响应用户与鼠标的交互。这些事件使开发人员能够通过捕获和处理各种与鼠标相关的操作来创建动态和交互式 Web 应用程序。

常见鼠标事件

以下是最常见的 JavaScript 鼠标事件：

鼠标事件 描述
Click 当元素按下鼠标按钮时，它会触发 click 事件。
Double Click dblclick 事件在快速双击鼠标按钮时触发。
Mouse Down and Mouse Up 鼠标单击的启动会触发 'mousedown' 事件，而单击的完成会导致 'mouseup' 事件发生。
Mouse Move 当鼠标指针移动到一个元素上时，它会触发 'mousemove' 事件;此事件为开发人员提供有关鼠标的位置信息。这些数据使他们能够设计植根于动态鼠标移动的响应式界面。
Context Menu 当用户尝试打开上下文菜单时（通常是通过右键单击），他们会触发 contextmenu 事件。此事件允许开发人员自定义或禁止上下文菜单的默认行为。
Wheel 当鼠标滚轮旋转时，它会触发 'wheel event';此特定事件通常表现在实现功能中，尤其是缩放或滚动。
Drag and Drop dragstart、dragend、dragover、dragenter、dragleave 和 drop 等事件与拖放功能相关联。它们允许开发人员创建交互式界面，用于在 Web 页面中拖动元素。

示例 ：Click Event

在此示例中，我们演示了 click 事件。单击该按钮时，它会向控制台消息打印相应的消息，即 “Clicked！”。此事件通常在提交表单时使用。


<!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>

示例：双击事件

dblclick 事件在此示例中运行，在双击指定按钮时触发。我们将事件侦听器附加到 id 为 “doubleClickButton” 的元素。用户双击该按钮会提示一个函数，该函数会记录一条控制台消息，确认他们与该消息的交互。


<!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>

示例：Mouse Down 和 Mouse Up 事件

在此方案中，以 mousedown 和 mouseup 事件为例：这两个事件都适用于标识为“mouseUpDownDiv”的 <div> 元素。建立了两个不同的事件侦听器;一个响应鼠标按钮的向下操作，而另一个响应所述按钮的释放或向上运动。在按下指定的 div （mousedown） 时，控制台日志中会显示一条消息，指示用户已按下其鼠标按钮。当用户释放鼠标按钮 （mouseup） 时，我们还会记录另一条消息，指示鼠标按钮已松开。


<!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>

示例：鼠标移动事件

在本例中，我们使用 mousemove 事件来监视鼠标指针在标识为 “mouseMoveDiv” 的特定 <div> 元素上的移动。处理程序函数从表示所述指针的 X-Y 坐标的事件对象中提取 clientX 和 clientY 属性。随后，这些将登录到 console;从而提供有关用户将光标放置在我们指定的 div 区域内的确切位置的实时反馈。


<!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>

示例：Wheel 事件

此示例展示了在旋转鼠标滚轮时激活的 wheel 事件。事件侦听器附加到 ID 为 “wheelDiv” 的 <div> 元素。当用户在此 div 上旋转鼠标滚轮时，关联的函数会向控制台记录一条消息，指示鼠标滚轮已旋转。


<!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>
打印本页
上一页
下一页