JavaScript之事件_鼠标按下事件-CSDN博客

本文链接：https://blog.csdn.net/m0_74859883/article/details/142858588

文章目录

一、鼠标事件
二、键盘事件
三、表单事件

一、鼠标事件

鼠标事件是当用鼠标对页面进行一些操作时会触发的事件。

常用方法
每一个都重要

事件	说明
onclick	鼠标点击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmousedown	鼠标按下事件
onmouseup	鼠标松开事件
onmousemove	鼠标移动事件

关于onmousedown 和 onmouseup 的使用

function handleMouseDown() {
  alert('鼠标按下了按钮！');
}
function handleMouseUp() {
  alert('鼠标释放了按钮！');
}

<button onmousedown="handleMouseDown()" onmouseup="handleMouseUp()">点击我</button>

在这个例子中：
onmousedown="handleMouseDown()"：当鼠标按钮在按钮上被按下时，会调用 handleMouseDown 函数
onmouseup="handleMouseUp()"：当鼠标按钮在按钮上被释放时，会调用 handleMouseUp 函数

每次用户按下按钮时，会弹出一个警告框显示“鼠标按下了按钮！”，当用户释放按钮时，会弹出另一个警告框显示“鼠标释放了按钮！”。

注意实际开发中，我们更倾向于使用JavaScript来添加事件监听器，而不是直接在HTML标签中使用事件属性。这样做的好处是可以更灵活地管理事件处理程序，并且可以避免HTML和JavaScript代码的混合，使得代码更加清晰。下面是使用JavaScript添加事件监听器的等效代码：

document.addEventListener('DOMContentLoaded', function() {
  var button = document.querySelector('button');
  button.addEventListener('mousedown', handleMouseDown);
  button.addEventListener('mouseup', handleMouseUp);
});
function handleMouseDown(event) {
  alert('鼠标按下了按钮！');
}
function handleMouseUp(event) {
  alert('鼠标释放了按钮！');
}

这段代码在文档加载完成后，为按钮添加了 mousedown 和 mouseup 事件监听器

二、键盘事件

常用的键盘事件就只有两个：

onkeydown：键盘按下会触发的事件。
onkeyup：键盘松开会触发的事件。
例子：

<script>
function handleKeyDown(event) {
  // 显示按下的键
  document.getElementById('keyStatus').textContent = '按下了键：' + event.key;
}
function handleKeyUp(event) {
  // 显示释放的键
  document.getElementById('keyStatus').textContent = '释放了键：' + event.key;
}
</script>
</head>
<body>
<input type="text" id="inputField" 
onkeydown="handleKeyDown(event)" onkeyup="handleKeyUp(event)">
<p id="keyStatus"></p>
</body>
</html>

在这个例子中：
οnkeydοwn=“handleKeyDown(event)”：当用户在文本框中按下任意键时，会调用 handleKeyDown 函数
οnkeyup=“handleKeyUp(event)”：当用户释放文本框中的任意键时，会调用 handleKeyUp 函数

页面上还有一个 < p > 元素，其 id 为 keyStatus，用于显示按键的状态。当用户按下或释放键时，handleKeyDown 或 handleKeyUp 函数会更新这个元素的文本内容，显示按下或释放的键

使用JavaScript添加事件监听器的等效代码如下：

document.addEventListener('DOMContentLoaded', function() {
  var inputField = document.getElementById('inputField');
  var keyStatus = document.getElementById('keyStatus');
  inputField.addEventListener('keydown', function(event) {
    keyStatus.textContent = '按下了键：' + event.key;
  });
  inputField.addEventListener('keyup', function(event) {
    keyStatus.textContent = '释放了键：' + event.key;
  });
});

这段代码在文档加载完成后，为文本框添加了 keydown 和 keyup 事件监听器，并更新页面上的状态信息。这种方式更加符合现代的JavaScript编程实践，因为它将JavaScript代码与HTML结构分离，使得代码更加清晰和易于维护

三、表单事件

常用表单事件

事件	说明
onfocus	表单元素聚焦时触发。
onblur	表单元素失焦时触发。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Focus and Blur Example</title>
<script>
function handleFocus() {
    alert("输入框已获得焦点！");
}
function handleBlur() {
    alert("输入框已失去焦点！");
}
</script>
</head>
<body>
<p>在下面的输入框中输入文本，然后点击输入框外的区域，看看会发生什么。</p>
<input type="text" onfocus="handleFocus()" onblur="handleBlur()" />
</body>
</html>

在这个例子中，我们有一个文本输入框。当用户点击这个输入框时，onfocus事件被触发，调用handleFocus函数，弹出一个警告框提示“输入框已获得焦点！”。当用户在输入框中输入文本后，点击输入框外的任何区域，onblur事件被触发，调用handleBlur函数，弹出一个警告框提示“输入框已失去焦点！”
简单直观地展示了onfocus和onblur事件的基本用法，但在实际开发中，我们通常会使用更复杂的逻辑来处理这些事件，比如验证输入内容、更新界面显示等、、