JavaScript 事件让网页变得有趣且互动，它们让网页能够响应用户点击、输入或鼠标移动等操作。 这篇文章将为你介绍 50 多个重要的 JavaScript 事件，让你能够更好地掌控网页行为。
一：鼠标事件
-
click当用户点击元素时触发。javascript
代码解读
复制代码
document.getElementById('myButton').addEventListener('click', () => { alert('按钮被点击了！'); }); -
dblclick当用户双击元素时触发。javascript
代码解读
复制代码
document.getElementById('myDiv').addEventListener('dblclick', () => { alert('区域被双击了！'); }); -
mousedown当用户按下鼠标按钮时触发。javascript
扫描二维码关注公众号，回复： 17516304 查看本文章
代码解读
复制代码
document.addEventListener('mousedown', (event) => { console.log('鼠标按钮被按下：', event.button); }); -
mouseup当用户松开鼠标按钮时触发。javascript
代码解读
复制代码
document.addEventListener('mouseup', () => { console.log('鼠标按钮被松开'); }); -
mousemove当用户在元素上移动鼠标时触发。javascript
代码解读
复制代码
document.addEventListener('mousemove', (event) => { console.log('鼠标位置：', event.clientX, event.clientY); }); -
mouseenter当鼠标进入元素时触发。javascript
代码解读
复制代码
document.getElementById('myDiv').addEventListener('mouseenter', () => { console.log('鼠标进入区域'); }); -
mouseleave当鼠标离开元素时触发。javascript
代码解读
复制代码
document.getElementById('myDiv').addEventListener('mouseleave', () => { console.log('鼠标离开区域'); }); -
wheel当用户使用鼠标滚轮时触发。javascript
代码解读
复制代码
document.addEventListener('wheel', (event) => { console.log('滚轮事件：', event.deltaY); });
二：键盘事件
-
keydown当用户按下键盘上的某个键时触发。javascript
代码解读
复制代码
document.addEventListener('keydown', (event) => { console.log('按键按下：', event.key); }); -
keyup当用户松开键盘上的某个键时触发。javascript
代码解读
复制代码
document.addEventListener('keyup', (event) => { console.log('按键松开：', event.key); }); -
keypress当用户按下字符键时触发（已弃用）。javascript
代码解读
复制代码
document.addEventListener('keypress', (event) => { console.log('按键按下：', event.key); });
三：表单事件
-
submit当用户提交表单时触发。javascript
代码解读
复制代码
document.getElementById('myForm').addEventListener('submit', (event) => { event.preventDefault(); // 阻止默认的表单提交行为 console.log('表单已提交！'); }); -
change当用户改变输入框内容时触发。javascript
代码解读
复制代码
document.getElementById('myInput').addEventListener('change', (event) => { console.log('输入框内容已改变：', event.target.value); }); -
input当用户输入内容时实时触发（即内容改变时立即触发）。javascript
代码解读
复制代码
document.getElementById('myInput').addEventListener('input', (event) => { console.log('输入框内容：', event.target.value); }); -
focus当输入框获得焦点时触发。javascript
代码解读
复制代码
document.getElementById('myInput').addEventListener('focus', () => { console.log('输入框获得焦点'); }); -
blur当输入框失去焦点时触发。javascript
代码解读
复制代码
document.getElementById('myInput').addEventListener('blur', () => { console.log('输入框失去焦点'); });
四：窗口和文档事件
-
load当整个页面加载完毕，包括所有依赖资源时触发。javascript
代码解读
复制代码
window.addEventListener('load', () => { console.log('页面完全加载'); }); -
resize当浏览器窗口大小改变时触发。javascript
代码解读
复制代码
window.addEventListener('resize', () => { console.log('窗口大小改变：', window.innerWidth, window.innerHeight); }); -
scroll当用户滚动文档时触发。javascript
代码解读
复制代码
window.addEventListener('scroll', () => { console.log('页面滚动'); }); -
unload当文档或子资源被卸载时触发。javascript
代码解读
复制代码
window.addEventListener('unload', () => { console.log('页面卸载'); }); -
beforeunload当用户要离开页面时触发，可以用来提示用户是否确认离开。javascript
代码解读
复制代码
window.addEventListener('beforeunload', (event) => { event.preventDefault(); event.returnValue = '你确定要离开吗？'; });
五：触控事件
-
touchstart当用户手指触碰触控板时触发。javascript
代码解读
复制代码
document.addEventListener('touchstart', (event) => { console.log('触控开始'); }); -
touchmove当用户手指在触控板上移动时触发。javascript
代码解读
复制代码
document.addEventListener('touchmove', (event) => { console.log('触控移动'); }); -
touchend当用户手指离开触控板时触发。javascript
代码解读
复制代码
document.addEventListener('touchend', (event) => { console.log('触控结束'); });
六：剪贴板事件
-
copy当用户复制内容时触发。javascript
代码解读
复制代码
document.addEventListener('copy', () => { console.log('内容已复制到剪贴板'); }); -
cut当用户剪切内容时触发。javascript
代码解读
复制代码
document.addEventListener('cut', () => { console.log('内容已剪切到剪贴板'); }); -
paste当用户粘贴内容时触发。javascript
代码解读
复制代码
document.addEventListener('paste', () => { console.log('内容已粘贴从剪贴板'); });
七：媒体事件
-
play当媒体开始播放时触发。javascript
代码解读
复制代码
const video = document.getElementById('myVideo'); video.addEventListener('play', () => { console.log('视频正在播放'); }); -
pause当媒体暂停时触发。javascript
代码解读
复制代码
video.addEventListener('pause', () => { console.log('视频已暂停'); }); -
ended当媒体播放完毕时触发。javascript
代码解读
复制代码
video.addEventListener('ended', () => { console.log('视频播放结束'); }); -
volumechange当音量改变时触发。javascript
代码解读
复制代码
video.addEventListener('volumechange', () => { console.log('音量已改变为：', video.volume); }); -
canplay当浏览器能够播放媒体时触发。javascript
代码解读
复制代码
video.addEventListener('canplay', () => { console.log('浏览器能够播放视频'); }); -
canplaythrough当浏览器能够播放整个媒体时触发。javascript
代码解读
复制代码
video.addEventListener('canplaythrough', () => { console.log('浏览器能够播放整个视频'); }); -
durationchange当媒体时长改变时触发。javascript
代码解读
复制代码
video.addEventListener('durationchange', () => { console.log('视频时长改变'); }); -
emptied当媒体数据被清空时触发。javascript
代码解读
复制代码
video.addEventListener('emptied', () => { console.log('视频数据被清空'); }); -
error当媒体加载失败时触发。javascript
代码解读
复制代码
video.addEventListener('error', () => { console.log('视频加载失败'); }); -
loadeddata当媒体数据已加载到浏览器时触发。javascript
代码解读
复制代码
video.addEventListener('loadeddata', () => { console.log('视频数据已加载'); }); -
loadedmetadata当媒体元数据已加载到浏览器时触发。javascript
代码解读
复制代码
video.addEventListener('loadedmetadata', () => { console.log('视频元数据已加载'); }); -
loadstart当媒体开始加载时触发。javascript
代码解读
复制代码
video.addEventListener('loadstart', () => { console.log('视频开始加载'); }); -
progress当媒体加载进度改变时触发。javascript
代码解读
复制代码
video.addEventListener('progress', () => { console.log('视频加载进度改变'); }); -
ratechange当媒体播放速度改变时触发。javascript
代码解读
复制代码
video.addEventListener('ratechange', () => { console.log('视频播放速度改变'); }); -
seeking当用户正在寻求视频中的特定位置时触发。javascript
代码解读
复制代码
video.addEventListener('seeking', () => { console.log('用户正在寻找视频中的特定位置'); });
八：自定义事件
-
CustomEvent创建和触发自定义事件。javascript
代码解读
复制代码
const event = new CustomEvent('myCustomEvent', { detail: { key: 'value' } }); document.dispatchEvent(event); document.addEventListener('myCustomEvent', (e) => { console.log('自定义事件触发：', e.detail); });
九：其他值得注意的事件
-
focusin当元素或其任何子元素获得焦点时触发。javascript
代码解读
复制代码
document.getElementById('myInput').addEventListener('focusin', () => { console.log('输入框或其子元素获得焦点'); }); -
focusout当元素或其任何子元素失去焦点时触发。javascript
代码解读
复制代码
document.getElementById('myInput').addEventListener('focusout', () => { console.log('输入框或其子元素失去焦点'); }); -
contextmenu当用户点击鼠标右键时触发。javascript
代码解读
复制代码
document.addEventListener('contextmenu', (event) => { event.preventDefault(); // 阻止默认的右键菜单 console.log('自定义右键菜单打开'); }); -
animationstart当 CSS 动画开始时触发。javascript
代码解读
复制代码
document.getElementById('myElement').addEventListener('animationstart', () => { console.log('动画开始'); }); -
animationend当 CSS 动画结束时触发。javascript
代码解读
复制代码
document.getElementById('myElement').addEventListener('animationend', () => { console.log('动画结束'); }); -
transitionend当 CSS 过渡结束时触发。javascript
代码解读
复制代码
document.getElementById('myElement').addEventListener('transitionend', () => { console.log('过渡结束'); }); -
abort当用户中止媒体加载时触发。javascript
代码解读
复制代码
const video = document.getElementById('myVideo'); video.addEventListener('abort', () => { console.log('视频加载被中止'); });
总结
了解 JavaScript 事件对于构建有趣、交互性强的网页应用至关重要。 这篇文章列出了许多有用的事件，你可以利用它们来提升你的网站。 当你熟练运用这些事件，你就能创建出用户友好、令人愉悦的应用程序。
原文链接：https://juejin.cn/post/7433062935525392395