日期：2025年1月25日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

---

---

---

一、前言

---

在 Web 开发的世界里，事件是用户与网页交互的桥梁。JavaScript 为我们提供了丰富的事件类型，使得开发者能够轻松地响应用户的行为，创造出丰富多样的交互体验。今天，我们就来全面了解一下这些事件类型及其应用。

二、常见的事件类型

---

JavaScript 中有许多常见的事件类型，它们用于处理各种用户交互和浏览器行为。以下是一些常见的事件类型及其简要描述：

（1）用户界面事件 (UI Events)

用户界面事件涉及页面加载、卸载和调整大小等操作。

• load ：当资源（如图像、脚本或整个文档）被加载完成时触发。常用于确保在 DOM 完全加载后执行脚本。
• unload ：当资源被卸载时触发，例如用户离开页面。
• abort ：当加载被取消时触发，如图像加载中断。
• error ：发生错误时触发，例如无法加载图像。
• select ：用户选择文本框（input 或 textarea）中的文本时触发。
• resize ：窗口或框架大小调整时触发。
• scroll ：用户滚动元素时触发。

（2）焦点事件 (Focus Events)

焦点事件关注于元素获得或失去焦点的情况。

• blur ：元素失去焦点时触发。
• focus ：元素获得焦点时触发。
• focusin ：元素即将获得焦点时触发，会冒泡。
• focusout ：元素即将失去焦点时触发，会冒泡。

（3）鼠标事件 (Mouse Events)

鼠标事件是用户使用鼠标与页面交互时触发的。

• click ：用户点击元素时触发。
• dblclick ：用户双击元素时触发。
• mousedown ：用户按下鼠标按钮时触发。
• mouseup ：用户释放鼠标按钮时触发。
• mouseover ：鼠标指针移动到元素上时触发。
• mouseout ：鼠标指针移出元素时触发。
• mousemove ：鼠标指针在元素上移动时触发。
• mouseenter ：鼠标指针进入元素时触发，不会冒泡。
• mouseleave ：鼠标指针离开元素时触发，不会冒泡。

（4）键盘事件 (Keyboard Events)

键盘事件涉及用户与键盘的交互。

• keydown ：用户按下键盘上的任意键时触发。
• keyup ：用户释放键盘上的键时触发。
• keypress ：用户按下并释放一个字符键时触发（已废弃）。

（5）输入事件 (Input Events)

输入事件关注于表单元素的值变化。

• input ：input、select 或 textarea 元素的值被修改时触发。
• change ：元素的值被修改并失去焦点时触发。

（6）触摸事件 (Touch Events)

触摸事件适用于触摸屏设备。

• touchstart ：用户触摸屏幕时触发。
• touchmove ：用户在屏幕上移动手指时触发。
• touchend ：用户从屏幕上移开手指时触发。
• touchcancel ：触摸事件被意外中断时触发。

（7）滚动事件 (Scroll Events)

• scroll : 当用户或代码滚动元素时触发。

（8）动画事件 (Animation Events)

• animationstart : 当 CSS 动画开始时触发。
• animationend : 当 CSS 动画结束时触发。
• animationiteration : 当 CSS 动画重复播放时触发。

（9）过渡事件 (Transition Events)

• transitionstart : 当 CSS 过渡开始时触发。
• transitionend : 当 CSS 过渡结束时触发。

三、实际应用案例

---

JavaScript 事件的使用，可以让我们的 Web 应用更加生动和互动，以下是一些事件的实际应用案例与大家分享下：

（1）用户界面事件 (UI Events)

示例：页面加载完成后做相应的操作。

window.addEventListener('load', function() {alert('Hello World!');
});

当页面完全加载后，会弹出一个Hello World。

（2）焦点事件 (Focus Events)

示例：输入框获得焦点时改变边框颜色

document.querySelector('#myInput').addEventListener('focus', function() {this.style.borderColor = 'blue';
});

当用户点击输入框时，输入框的边框颜色会变为蓝色。

（3）鼠标事件 (Mouse Events)

实际案例：实现图片的鼠标悬停放大效果

document.querySelector('#myImage').addEventListener('mouseover', function() {this.style.transform = 'scale(1.1)';this.style.transition = 'transform 0.3s ease';
});document.querySelector('#myImage').addEventListener('mouseout', function() {this.style.transform = 'scale(1)';
});

当鼠标悬停在图片上时，图片会放大10%，并在鼠标移开后恢复原大小。

（4）键盘事件 (Keyboard Events)

示例：监听键盘事件实现快捷键功能

document.addEventListener('keydown', function(event) {if (event.ctrlKey && event.key === 's') {event.preventDefault();saveDocument();}
});function saveDocument() {alert('文档已保存！');
}

在这个示例中，我们阻止了默认的Ctrl+S保存行为，并实现了自定义的保存文档功能。

（5）输入事件 (Input Events)

实际案例：实时显示输入框中的字符数

document.querySelector('#myTextarea').addEventListener('input', function() {document.querySelector('#charCount').textContent = this.value.length;
});

在这个示例中，我们实时更新一个元素来显示用户在文本区域输入的字符数。

（6）触摸事件 (Touch Events)

示例：实现简单的触摸滑动效果

let startX;document.querySelector('#myElement').addEventListener('touchstart', function(event) {startX = event.touches[0].clientX;
});document.querySelector('#myElement').addEventListener('touchmove', function(event) {const currentX = event.touches[0].clientX;const diffX = currentX - startX;this.style.transform = `translateX(${diffX}px)`;
});document.querySelector('#myElement').addEventListener('touchend', function(event) {// 可以在这里处理触摸结束的逻辑
});

在这个例子中，我们通过触摸事件实现了元素的滑动效果。

四、结语

---

了解和掌握 JavaScript 中的事件类型对于前端开发者来说至关重要。通过合理使用这些事件，我们可以创建出更加丰富和响应式的用户界面。希望本文能够帮助您更好地理解这些事件类型，并在实际项目中灵活运用。

---

参考文章：

• 《MDN Web docs》- 事件介绍
• 《MDN Web docs》- 事件参考

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/145339699