50+ JavaScript 事件,每个开发者都应该了解!

997 阅读5分钟

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

一:鼠标事件

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

    document.getElementById('myButton').addEventListener('click', () => {
      alert('按钮被点击了!');
    });
    
  2. dblclick 当用户双击元素时触发。

    document.getElementById('myDiv').addEventListener('dblclick', () => {
      alert('区域被双击了!');
    });
    
  3. mousedown 当用户按下鼠标按钮时触发。

    document.addEventListener('mousedown', (event) => {
      console.log('鼠标按钮被按下:', event.button);
    });
    
  4. mouseup 当用户松开鼠标按钮时触发。

    document.addEventListener('mouseup', () => {
      console.log('鼠标按钮被松开');
    });
    
  5. mousemove 当用户在元素上移动鼠标时触发。

    document.addEventListener('mousemove', (event) => {
      console.log('鼠标位置:', event.clientX, event.clientY);
    });
    
  6. mouseenter 当鼠标进入元素时触发。

    document.getElementById('myDiv').addEventListener('mouseenter', () => {
      console.log('鼠标进入区域');
    });
    
  7. mouseleave 当鼠标离开元素时触发。

    document.getElementById('myDiv').addEventListener('mouseleave', () => {
      console.log('鼠标离开区域');
    });
    
  8. wheel 当用户使用鼠标滚轮时触发。

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

二:键盘事件

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

    document.addEventListener('keydown', (event) => {
      console.log('按键按下:', event.key);
    });
    
  2. keyup 当用户松开键盘上的某个键时触发。

    document.addEventListener('keyup', (event) => {
      console.log('按键松开:', event.key);
    });
    
  3. keypress 当用户按下字符键时触发(已弃用)。

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

三:表单事件

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

    document.getElementById('myForm').addEventListener('submit', (event) => {
      event.preventDefault(); // 阻止默认的表单提交行为
      console.log('表单已提交!');
    });
    
  2. change 当用户改变输入框内容时触发。

    document.getElementById('myInput').addEventListener('change', (event) => {
      console.log('输入框内容已改变:', event.target.value);
    });
    
  3. input 当用户输入内容时实时触发(即内容改变时立即触发)。

    document.getElementById('myInput').addEventListener('input', (event) => {
      console.log('输入框内容:', event.target.value);
    });
    
  4. focus 当输入框获得焦点时触发。

    document.getElementById('myInput').addEventListener('focus', () => {
      console.log('输入框获得焦点');
    });
    
  5. blur 当输入框失去焦点时触发。

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

四:窗口和文档事件

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

    window.addEventListener('load', () => {
      console.log('页面完全加载');
    });
    
  2. resize 当浏览器窗口大小改变时触发。

    window.addEventListener('resize', () => {
      console.log('窗口大小改变:', window.innerWidth, window.innerHeight);
    });
    
  3. scroll 当用户滚动文档时触发。

    window.addEventListener('scroll', () => {
      console.log('页面滚动');
    });
    
  4. unload 当文档或子资源被卸载时触发。

    window.addEventListener('unload', () => {
      console.log('页面卸载');
    });
    
  5. beforeunload 当用户要离开页面时触发,可以用来提示用户是否确认离开。

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

五:触控事件

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

    document.addEventListener('touchstart', (event) => {
      console.log('触控开始');
    });
    
  2. touchmove 当用户手指在触控板上移动时触发。

    document.addEventListener('touchmove', (event) => {
      console.log('触控移动');
    });
    
  3. touchend 当用户手指离开触控板时触发。

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

六:剪贴板事件

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

    document.addEventListener('copy', () => {
      console.log('内容已复制到剪贴板');
    });
    
  2. cut 当用户剪切内容时触发。

    document.addEventListener('cut', () => {
      console.log('内容已剪切到剪贴板');
    });
    
  3. paste 当用户粘贴内容时触发。

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

七:媒体事件

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

    const video = document.getElementById('myVideo');
    video.addEventListener('play', () => {
      console.log('视频正在播放');
    });
    
  2. pause 当媒体暂停时触发。

    video.addEventListener('pause', () => {
      console.log('视频已暂停');
    });
    
  3. ended 当媒体播放完毕时触发。

    video.addEventListener('ended', () => {
      console.log('视频播放结束');
    });
    
  4. volumechange 当音量改变时触发。

    video.addEventListener('volumechange', () => {
      console.log('音量已改变为:', video.volume);
    });
    
  5. canplay 当浏览器能够播放媒体时触发。

    video.addEventListener('canplay', () => {
      console.log('浏览器能够播放视频');
    });
    
  6. canplaythrough 当浏览器能够播放整个媒体时触发。

    video.addEventListener('canplaythrough', () => {
      console.log('浏览器能够播放整个视频');
    });
    
  7. durationchange 当媒体时长改变时触发。

    video.addEventListener('durationchange', () => {
      console.log('视频时长改变');
    });
    
  8. emptied 当媒体数据被清空时触发。

    video.addEventListener('emptied', () => {
      console.log('视频数据被清空');
    });
    
  9. error 当媒体加载失败时触发。

    video.addEventListener('error', () => {
      console.log('视频加载失败');
    });
    
  10. loadeddata 当媒体数据已加载到浏览器时触发。

    video.addEventListener('loadeddata', () => {
      console.log('视频数据已加载');
    });
    
  11. loadedmetadata 当媒体元数据已加载到浏览器时触发。

    video.addEventListener('loadedmetadata', () => {
      console.log('视频元数据已加载');
    });
    
  12. loadstart 当媒体开始加载时触发。

    video.addEventListener('loadstart', () => {
      console.log('视频开始加载');
    });
    
  13. progress 当媒体加载进度改变时触发。

    video.addEventListener('progress', () => {
      console.log('视频加载进度改变');
    });
    
  14. ratechange 当媒体播放速度改变时触发。

    video.addEventListener('ratechange', () => {
      console.log('视频播放速度改变');
    });
    
  15. seeking 当用户正在寻求视频中的特定位置时触发。

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

八:自定义事件

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

    const event = new CustomEvent('myCustomEvent', { detail: { key: 'value' } });
    document.dispatchEvent(event);
    
    document.addEventListener('myCustomEvent', (e) => {
      console.log('自定义事件触发:', e.detail);
    });
    

九:其他值得注意的事件

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

    document.getElementById('myInput').addEventListener('focusin', () => {
      console.log('输入框或其子元素获得焦点');
    });
    
  2. focusout 当元素或其任何子元素失去焦点时触发。

    document.getElementById('myInput').addEventListener('focusout', () => {
      console.log('输入框或其子元素失去焦点');
    });
    
  3. contextmenu 当用户点击鼠标右键时触发。

    document.addEventListener('contextmenu', (event) => {
      event.preventDefault(); // 阻止默认的右键菜单
      console.log('自定义右键菜单打开');
    });
    
  4. animationstart 当 CSS 动画开始时触发。

    document.getElementById('myElement').addEventListener('animationstart', () => {
      console.log('动画开始');
    });
    
  5. animationend 当 CSS 动画结束时触发。

    document.getElementById('myElement').addEventListener('animationend', () => {
      console.log('动画结束');
    });
    
  6. transitionend 当 CSS 过渡结束时触发。

    document.getElementById('myElement').addEventListener('transitionend', () => {
      console.log('过渡结束');
    });
    
  7. abort 当用户中止媒体加载时触发。

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

总结

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

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