九个你应该知道的 JavaScript 事件-51CTO.COM

JavaScript 事件是前端开发中用户交互的基石。从鼠标点击到键盘输入、触摸屏操作到页面滚动，事件监听器可帮助开发人员捕捉用户行为并做出相应响应。

本文探讨了 9 个 JavaScript 事件，提供了实际示例和见解，以增强您的 Web 开发技能。

1. 鼠标事件

鼠标事件是网页上用户交互的基础。让我们探索一些最常用的鼠标事件：

点击

当在元素上按下并释放鼠标按钮时，会触发点击事件。

document.getElementById("myButton").addEventListener("click", function() {
   alert("Button clicked!");
});1.
2.
3.

双击

双击元素时会触发 dblclick 事件。

document.getElementById("myButton").addEventListener("dblclick", function() {
   alert("Button double-clicked!");
});1.
2.
3.

Mousedown 和 Mouseup

当鼠标按钮在元素上被按下 (mousedown) 和释放 (mouseup) 时，会触发这些事件。

document.getElementById("myButton").addEventListener("mousedown", function() {
   console.log("Mouse button pressed!");
});


document.getElementById("myButton").addEventListener("mouseup", function() {
   console.log("Mouse button released!");
});1.
2.
3.
4.
5.
6.
7.
8.

Mouseover 和 Mouseout 当鼠标指针进入（mouseover）或离开（mouseout）元素时，这些事件会触发。

document.getElementById("myButton").addEventListener("mouseover", function() {
   this.style.backgroundColor = "yellow";
});


document.getElementById("myButton").addEventListener("mouseout", function() {
   this.style.backgroundColor = "";
});1.
2.
3.
4.
5.
6.
7.
8.

2. 键盘事件

键盘事件对于通过键盘捕获用户输入至关重要。

Keydown 和 Keyup

当按下（keydown）或释放（keyup）键时，会触发这些事件。

document.addEventListener("keydown", function(event) {
   console.log(`Key pressed: ${event.key}`);
});


document.addEventListener("keyup", function(event) {
   console.log(`Key released: ${event.key}`);
});1.
2.
3.
4.
5.
6.
7.
8.

Keypress（已弃用）

按下字符键时会触发 keypress 事件。不过，该事件已被弃用，取而代之的是 keydown 和 keyup。

document.addEventListener("keypress", function(event) {
   console.log(`Character key pressed: ${event.key}`);
});1.
2.
3.

3. 触摸事件

触摸事件对于移动设备和触摸屏设备至关重要。

Touchstart、Touchmove 和 Touchend

这些事件捕获触摸交互的开始、移动和结束。

document.getElementById("touchArea").addEventListener("touchstart", function() {
   console.log("Touch started.");
});


document.getElementById("touchArea").addEventListener("touchmove", function() {
   console.log("Touch moving.");
});


document.getElementById("touchArea").addEventListener("touchend", function() {
   console.log("Touch ended.");
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

4. 表单事件

表单事件对于处理用户输入和表单提交至关重要。

提交

提交表单时会触发提交事件。

document.getElementById("myForm").addEventListener("submit", function(event) {
   event.preventDefault();  // Prevent default form submission
   alert("Form submitted!");
});1.
2.
3.
4.

更改和输入

当表单元素的值发生更改时，会触发更改事件，而当输入字段的值发生更改时，会立即触发输入事件。

document.getElementById("myInput").addEventListener("change", function() {
    console.log("Input value changed.");
});


document.getElementById("myInput").addEventListener("input", function() {
    console.log(`Current input value: ${this.value}`);
});1.
2.
3.
4.
5.
6.
7.
8.

5. 文档/窗口事件

这些事件与整个文档或浏览器窗口相关。

加载

当页面及其所有资源加载完成后，将触发加载事件。

window.addEventListener("load", function() {
    console.log("Page loaded and all resources are ready.");
});1.
2.
3.

滚动和调整大小

当页面滚动或窗口调整大小时会触发这些事件。

window.addEventListener("scroll", function() {
    console.log("Page is scrolling.");
});


window.addEventListener("resize", function() {
    console.log("Window resized.");
});1.
2.
3.
4.
5.
6.
7.
8.

Beforeunload

当用户试图离开页面时，会触发此事件。

window.addEventListener("beforeunload", function(event) {
    event.preventDefault();  // Cancel the event
    event.returnValue = "Are you sure you want to leave?";
});1.
2.
3.
4.

6. 焦点事件

焦点事件对于管理用户对表单元素的注意力非常重要。

焦点和模糊

当元素获得（焦点）或失去（模糊）焦点时，会触发这些事件。

document.getElementById("myInput").addEventListener("focus", function() {
    console.log("Input field focused.");
});


document.getElementById("myInput").addEventListener("blur", function() {
    console.log("Input field lost focus.");
});1.
2.
3.
4.
5.
6.
7.
8.

7. 拖放事件

拖放事件可实现交互式用户体验。

Dragstart、Dragover 和 Drop

这些事件处理拖动的开始、拖过放置区域以及放置元素。

document.getElementById("dragItem").addEventListener("dragstart", function(event) {
    console.log("Drag started.");
    event.dataTransfer.setData("text", event.target.id);
});


document.getElementById("dropZone").addEventListener("dragover", function(event) {
    event.preventDefault();  // Allow drop
    console.log("Drag over drop zone.");
});


document.getElementById("dropZone").addEventListener("drop", function(event) {
    event.preventDefault();  // Prevent default action
    const data = event.dataTransfer.getData("text");
    console.log("Dropped element ID: " + data);
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

8. 动画事件

动画事件对于控制 CSS 动画非常有用。

Animationstart 和 Animationend

这些事件在 CSS 动画开始和结束时触发。

document.getElementById("animatedElement").addEventListener("animationstart", function() {
    console.log("Animation started!");
});


document.getElementById("animatedElement").addEventListener("animationend", function() {
    console.log("Animation ended!");
});1.
2.
3.
4.
5.
6.
7.
8.

9. 过渡事件

过渡事件有助于管理 CSS 过渡。

Transitionend

当 CSS 过渡完成时，会触发此事件。

document.getElementById("transitionElement").addEventListener("transitionend", function() {
    console.log("Transition ended.");
});1.
2.
3.

结论

JavaScript 事件为开发人员提供了强大的工具来创建动态、响应迅速的用户体验。

从简单的鼠标点击到复杂的拖放操作，了解这些事件对于任何前端开发人员来说都至关重要。

通过掌握这些事件类型并有效地实现它们，您可以显著增强 Web 应用程序的交互性和响应能力。

请记住为您的特定用例选择正确的事件，并在附加多个事件侦听器时始终考虑性能影响。

最后，感谢您的阅读，祝编程愉快！