50+ JavaScript 事件，每个开发者都应该了解！JavaScript 事件让网页变得有趣且互动，它们让网页能够

JavaScript 事件让网页变得有趣且互动，它们让网页能够响应用户点击、输入或鼠标移动等操作。这篇文章将为你介绍 50 多个重要的 JavaScript 事件，让你能够更好地掌控网页行为。

一：鼠标事件

click 当用户点击元素时触发。

document.getElementById('myButton').addEventListener('click', () => {
  alert('按钮被点击了！');
});

dblclick 当用户双击元素时触发。

document.getElementById('myDiv').addEventListener('dblclick', () => {
  alert('区域被双击了！');
});

mousedown 当用户按下鼠标按钮时触发。

document.addEventListener('mousedown', (event) => {
  console.log('鼠标按钮被按下：', event.button);
});

mouseup 当用户松开鼠标按钮时触发。

document.addEventListener('mouseup', () => {
  console.log('鼠标按钮被松开');
});

mousemove 当用户在元素上移动鼠标时触发。

document.addEventListener('mousemove', (event) => {
  console.log('鼠标位置：', event.clientX, event.clientY);
});

mouseenter 当鼠标进入元素时触发。

document.getElementById('myDiv').addEventListener('mouseenter', () => {
  console.log('鼠标进入区域');
});

mouseleave 当鼠标离开元素时触发。

document.getElementById('myDiv').addEventListener('mouseleave', () => {
  console.log('鼠标离开区域');
});

wheel 当用户使用鼠标滚轮时触发。

document.addEventListener('wheel', (event) => {
  console.log('滚轮事件：', event.deltaY);
});

二：键盘事件

keydown 当用户按下键盘上的某个键时触发。

document.addEventListener('keydown', (event) => {
  console.log('按键按下：', event.key);
});

keyup 当用户松开键盘上的某个键时触发。

document.addEventListener('keyup', (event) => {
  console.log('按键松开：', event.key);
});

keypress 当用户按下字符键时触发（已弃用）。

document.addEventListener('keypress', (event) => {
  console.log('按键按下：', event.key);
});

三：表单事件

submit 当用户提交表单时触发。

document.getElementById('myForm').addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止默认的表单提交行为
  console.log('表单已提交！');
});

change 当用户改变输入框内容时触发。

document.getElementById('myInput').addEventListener('change', (event) => {
  console.log('输入框内容已改变：', event.target.value);
});

input 当用户输入内容时实时触发（即内容改变时立即触发）。

document.getElementById('myInput').addEventListener('input', (event) => {
  console.log('输入框内容：', event.target.value);
});

focus 当输入框获得焦点时触发。

document.getElementById('myInput').addEventListener('focus', () => {
  console.log('输入框获得焦点');
});

blur 当输入框失去焦点时触发。

document.getElementById('myInput').addEventListener('blur', () => {
  console.log('输入框失去焦点');
});

四：窗口和文档事件

load 当整个页面加载完毕，包括所有依赖资源时触发。

window.addEventListener('load', () => {
  console.log('页面完全加载');
});

resize 当浏览器窗口大小改变时触发。

window.addEventListener('resize', () => {
  console.log('窗口大小改变：', window.innerWidth, window.innerHeight);
});

scroll 当用户滚动文档时触发。

window.addEventListener('scroll', () => {
  console.log('页面滚动');
});

unload 当文档或子资源被卸载时触发。

window.addEventListener('unload', () => {
  console.log('页面卸载');
});

beforeunload 当用户要离开页面时触发，可以用来提示用户是否确认离开。

window.addEventListener('beforeunload', (event) => {
  event.preventDefault();
  event.returnValue = '你确定要离开吗？';
});

五：触控事件

touchstart 当用户手指触碰触控板时触发。

document.addEventListener('touchstart', (event) => {
  console.log('触控开始');
});

touchmove 当用户手指在触控板上移动时触发。

document.addEventListener('touchmove', (event) => {
  console.log('触控移动');
});

touchend 当用户手指离开触控板时触发。

document.addEventListener('touchend', (event) => {
  console.log('触控结束');
});

六：剪贴板事件

copy 当用户复制内容时触发。

document.addEventListener('copy', () => {
  console.log('内容已复制到剪贴板');
});

cut 当用户剪切内容时触发。

document.addEventListener('cut', () => {
  console.log('内容已剪切到剪贴板');
});

paste 当用户粘贴内容时触发。

document.addEventListener('paste', () => {
  console.log('内容已粘贴从剪贴板');
});

七：媒体事件

play 当媒体开始播放时触发。

const video = document.getElementById('myVideo');
video.addEventListener('play', () => {
  console.log('视频正在播放');
});

pause 当媒体暂停时触发。

video.addEventListener('pause', () => {
  console.log('视频已暂停');
});

ended 当媒体播放完毕时触发。

video.addEventListener('ended', () => {
  console.log('视频播放结束');
});

volumechange 当音量改变时触发。

video.addEventListener('volumechange', () => {
  console.log('音量已改变为：', video.volume);
});

canplay 当浏览器能够播放媒体时触发。

video.addEventListener('canplay', () => {
  console.log('浏览器能够播放视频');
});

canplaythrough 当浏览器能够播放整个媒体时触发。

video.addEventListener('canplaythrough', () => {
  console.log('浏览器能够播放整个视频');
});

durationchange 当媒体时长改变时触发。

video.addEventListener('durationchange', () => {
  console.log('视频时长改变');
});

emptied 当媒体数据被清空时触发。

video.addEventListener('emptied', () => {
  console.log('视频数据被清空');
});

error 当媒体加载失败时触发。

video.addEventListener('error', () => {
  console.log('视频加载失败');
});

loadeddata 当媒体数据已加载到浏览器时触发。

video.addEventListener('loadeddata', () => {
  console.log('视频数据已加载');
});

loadedmetadata 当媒体元数据已加载到浏览器时触发。

video.addEventListener('loadedmetadata', () => {
  console.log('视频元数据已加载');
});

loadstart 当媒体开始加载时触发。

video.addEventListener('loadstart', () => {
  console.log('视频开始加载');
});

progress 当媒体加载进度改变时触发。

video.addEventListener('progress', () => {
  console.log('视频加载进度改变');
});

ratechange 当媒体播放速度改变时触发。

video.addEventListener('ratechange', () => {
  console.log('视频播放速度改变');
});

seeking 当用户正在寻求视频中的特定位置时触发。

video.addEventListener('seeking', () => {
  console.log('用户正在寻找视频中的特定位置');
});

八：自定义事件

CustomEvent 创建和触发自定义事件。

const event = new CustomEvent('myCustomEvent', { detail: { key: 'value' } });
document.dispatchEvent(event);

document.addEventListener('myCustomEvent', (e) => {
  console.log('自定义事件触发：', e.detail);
});

九：其他值得注意的事件

focusin 当元素或其任何子元素获得焦点时触发。

document.getElementById('myInput').addEventListener('focusin', () => {
  console.log('输入框或其子元素获得焦点');
});

focusout 当元素或其任何子元素失去焦点时触发。

document.getElementById('myInput').addEventListener('focusout', () => {
  console.log('输入框或其子元素失去焦点');
});

contextmenu 当用户点击鼠标右键时触发。

document.addEventListener('contextmenu', (event) => {
  event.preventDefault(); // 阻止默认的右键菜单
  console.log('自定义右键菜单打开');
});

animationstart 当 CSS 动画开始时触发。

document.getElementById('myElement').addEventListener('animationstart', () => {
  console.log('动画开始');
});

animationend 当 CSS 动画结束时触发。

document.getElementById('myElement').addEventListener('animationend', () => {
  console.log('动画结束');
});

transitionend 当 CSS 过渡结束时触发。

document.getElementById('myElement').addEventListener('transitionend', () => {
  console.log('过渡结束');
});

abort 当用户中止媒体加载时触发。

const video = document.getElementById('myVideo');
video.addEventListener('abort', () => {
  console.log('视频加载被中止');
});

总结

了解 JavaScript 事件对于构建有趣、交互性强的网页应用至关重要。这篇文章列出了许多有用的事件，你可以利用它们来提升你的网站。当你熟练运用这些事件，你就能创建出用户友好、令人愉悦的应用程序。

最后，如果这篇文章对你有所帮助，请“点赞、收藏+关注” ，感谢支持！祝您编码愉快！