JavaScript中的事件类型：常见的键盘和鼠标事件

JavaScript 提供了广泛的事件，使您可以与网页上的用户操作进行交互并做出响应。在这些事件中，键盘和鼠标事件是最常用的。在本文中，我们将了解 JavaScript 中不同类型的键盘和鼠标事件，并查看如何使用它们的示例。

键盘事件

当用户与键盘交互时，例如按下某个键、释放某个键或键入字符，就会发生键盘事件。键盘事件让我们可以做一些很酷的事情，例如检查用户是否在表单中正确输入了某些内容，或者在按下特定键时发生某些操作。就好像网站正在监听您按下的键并做出相应的反应。 键盘事件分为三种类型：

keydown 事件

当用户按下某个键时会触发此键盘事件。如果用户按住某个键，则会重复触发。

document.addEventListener('keydown', function(event) {
  console.log('Key pressed is:', event.key);
});

此代码演示了 keydown 事件的工作原理。它向文档对象的 keydown 事件添加一个事件侦听器。当按下键盘上的某个键时，将执行指定的功能。此函数将消息记录到控制台。该消息包含字符串 Key Pressed is:，后跟 event.key 的值，该值表示按下的键。

keyup 事件

释放按键时会发生此键盘事件。它可用于检测用户何时释放特定键。

document.addEventListener('keyup', (event) => {
    var name = event.key;
    alert(`Key pressed: ${name}`);
}, false);

上面的代码为 keyup 事件添加了一个事件监听器，这样当键盘上松开某个键时，就会执行一个箭头功能。该箭头函数将 event.key 的值赋给名为 name 的变量，它代表释放的密钥。释放按键时会出现一个警告框，并显示一条消息，其中包含字符串 Key Pressed:，后跟使用字符串插值的 name 变量的值 (${name} ）。

可用于演示 keyup 事件的另一个示例是设置一个输入字段并创建一个函数，当用户释放按键时，该函数将输入字段中键入的字符转换为大写。要尝试下面的示例，请创建一个 id 为 fname 的输入标记和一个类似 onkeyup="myFunction()" 在输入标记内。

function myFunction() {
  let x = document.getElementById("fname"); 
  x.value = x.value.toUpperCase();
}

keypress 事件

按下某个键时会触发 keypress 事件。在下面的代码示例中，事件侦听器被添加到文档对象中，该事件侦听器在按下按键并生成字符值时执行函数。箭头函数将一条消息记录到浏览器的控制台，其中包含字符串 Key Pressed:，后跟 event.key 的值，该值表示按下的键的字符值。 p>

document.addEventListener('keypress', (event) => {
    console.log('Key pressed:', event.key);
});

警告 某些浏览器不再支持按键事件，并且并非所有浏览器中的所有键（例如 Alt、Control、Shift 或 Esc）都会触发该事件。建议改用 keydown 或 keyup 事件。

使用键盘事件的示例

鼠标事件

另一方面，鼠标事件可以帮助您创建更具吸引力的网站。它们处理鼠标与 HTML 文档交互时发生的事件，例如单击、移动或滚动。它们使我们能够在用户单击鼠标按钮、将鼠标移动到元素上或在屏幕上拖动项目时做出反应。就好像网站正在跟踪您的鼠标移动和点击来弄清楚您想要做什么。鼠标事件有多种类型：

点击 事件

当用户单击某个元素时执行此事件。

var element = document.querySelector('.btn');
element.addEventListener('click', function () {
  element.style.backgroundColor = 'blue';
});

要执行上述代码，请在 HTML 中创建一个 CSS 类名称为 btn 的按钮。上面的代码使用 querySelector 方法选择 CSS 类名为 btn 的元素，并将其分配给 element 变量。侦听 click 事件的事件侦听器已添加到该元素。当点击该元素时，将执行指定的功能。本例中的功能是将元素的背景颜色更改为蓝色。

您还可以构建一个简单的游戏，用户可以通过使用 math.floor 和 math.random 方法生成随机颜色，在框内单击以连续更改框的背景颜色。

dbclick 事件

当用户用鼠标双击某个元素时，此事件调用一个函数。要执行下面的代码示例，请在 HTML 中创建一个 CSS 类名称为 btn 的按钮。使用 querySelector 方法获取元素并向其添加事件侦听器。双击该按钮时，将调用该函数，显示一条警报消息，并且按钮中文本的字体大小会增加。

var button = document.querySelector('.btn');
button.addEventListener('dblclick', function (event) {
  alert('Button double-clicked!');
  button.style.fontSize = '40px';
});

使用 dbclick 事件的高级方法是使用户能够编辑内容。例如，双击文本元素可以将其转换为可编辑的输入字段，允许用户直接进行更改。下面是使用 dbclick 事件编辑内容的演示。

mouseup 和 mousedown 事件

当用户将光标悬停在某个元素上并按下鼠标按钮时，会触发此 mousedown 事件。 创建一个 id 为 text 的按钮。当用鼠标单击该按钮时，会触发消息：“鼠标按钮已按下”。

var button = document.getElementById('text');
button.addEventListener('mousedown', function (event) {
  alert('Mouse button pressed!');
});

当用户单击某个元素后释放鼠标按钮时，会触发 mouseup 事件。创建一个 id 为 text 的按钮。当用鼠标单击按钮并释放时，会触发消息：“鼠标按钮已释放”。

var button = document.getElementById('text');
button.addEventListener('mouseup', function (event) {
  alert('Mouse button released!');
});

如何使用这些 mouseup 和 mousedown 事件的实际示例是在实现拖放功能以及绘图和草图时。

mouseover 和 mouseout 事件

当鼠标指针悬停在某个元素上时，会发生 mouseover 事件，而当鼠标指针离开该元素时，会发生 mouseout 事件。这是这两个鼠标事件的快速演示。

在上面的演示中，当用户的鼠标经过图像时，图像会放大，当鼠标离开图像时，图像会恢复到正常大小。

mouseover 事件可用于创建一个工具提示，当鼠标悬停在元素上时，该提示提供有关该元素的附加信息。 mouseover 和 mouseout 事件还可用于创建交互式导航菜单，其中当用户的鼠标指针悬停在菜单项上时会出现子菜单。

mousemove 和 mouseleave 事件

当用户将鼠标光标移动到某个元素上时，会触发 mousemove 事件，当鼠标光标离开该元素时，会触发 mouseleave 事件。这些事件使开发人员能够监视鼠标移动。

每当用户的鼠标位于 div 容器内时，上述代码都会获取鼠标指针坐标，并将坐标显示为框下方的文本。然后，在用户鼠标离开 div 元素后，它会显示文本，指示指针已离开 div。

结论

诸如 keydown、keyup 和 keypress 之类的键盘事件允许我们捕获并响应来自键盘的用户输入。无论您是实现表单验证、提供键盘快捷键还是创建基于文本的游戏，键盘事件对于用户交互都是至关重要的。另一方面，鼠标事件，如click、dblclick、mousedown、mouseup、mouseover、mouseout、mousemovephpcn endcphpcn 和 mouseleave，允许我们捕获并响应用户与鼠标的交互。

总之，JavaScript 的键盘和鼠标事件使我们能够通过捕获按下的按键和鼠标的移动来构建似乎正在监听和响应用户活动的网站。现在您已经了解了各种类型的键盘和鼠标事件以及如何使用它们来构建交互式网站和 Web 应用程序，继续构建有趣的交互式游戏和网站。快乐编码！

以上就是JavaScript中的事件类型：常见的键盘和鼠标事件的详细内容，更多请关注编程之家其它相关文章！