JavaScript事件全解析与实例代码

以下是补充的 JavaScript 事件实例，覆盖更多应用场景，确保总数超过 50 个：

十六、页面生命周期事件

41. pageshow / pagehide
    页面显示或隐藏时触发（如浏览器前进/后退缓存）。

    window.addEventListener('pageshow', () => {
      console.log('页面从缓存中恢复');
    });
    

42. unload
    页面即将卸载时触发（谨慎使用，可能阻塞）。

    window.addEventListener('unload', () => {
      navigator.sendBeacon('/log', '用户离开页面');
    });
    

十七、Web 组件事件

43. slotchange
    Shadow DOM 中的插槽内容变化时触发。

    const slot = document.querySelector('slot');
    slot.addEventListener('slotchange', (e) => {
      console.log('插槽内容已更新:', e.target.assignedNodes());
    });
    

44. connectedCallback / disconnectedCallback
    自定义元素被插入 DOM 或移除时触发（生命周期钩子）。

    class MyElement extends HTMLElement {
      connectedCallback() {
        console.log('元素已挂载到 DOM');
      }
      disconnectedCallback() {
        console.log('元素已从 DOM 移除');
      }
    }
    

十八、WebRTC 事件

45. icecandidate
    WebRTC 生成网络候选地址时触发。

    peerConnection.onicecandidate = (e) => {
      if (e.candidate) {
        sendCandidateToRemote(e.candidate); // 发送候选地址给对端
      }
    };
    

46. track
    接收到远程媒体流轨道时触发。

    peerConnection.ontrack = (e) => {
      videoElement.srcObject = e.streams[0]; // 显示远程视频流
    };
    

十九、WebSocket 事件

47. open / close / message
    WebSocket 连接建立、关闭或接收消息时触发。

    const socket = new WebSocket('wss://example.com');
    socket.addEventListener('open', () => socket.send('Hello Server!'));
    socket.addEventListener('message', (e) => console.log('收到消息:', e.data));
    

48. error
    WebSocket 连接发生错误时触发。

    socket.addEventListener('error', (e) => {
      console.error('WebSocket 错误:', e);
    });
    

二十、IndexedDB 事件

49. upgradeneeded
    数据库版本升级时触发（初始化或修改结构）。

    const request = indexedDB.open('myDB', 2);
    request.onupgradeneeded = (e) => {
      const db = e.target.result;
      if (!db.objectStoreNames.contains('users')) {
        db.createObjectStore('users', { keyPath: 'id' });
      }
    };
    

50. success / error
    IndexedDB 操作成功或失败时触发。

    const transaction = db.transaction('users', 'readwrite');
    transaction.oncomplete = () => console.log('事务完成');
    transaction.onerror = (e) => console.error('事务失败:', e.target.error);
    

二十一、Web Audio API 事件

51. ended
    音频播放结束时触发（适用于 AudioBufferSourceNode）。

    const sourceNode = audioContext.createBufferSource();
    sourceNode.buffer = audioBuffer;
    sourceNode.start(0);
    sourceNode.onended = () => console.log('音频播放结束');
    

52. statechange
    AudioContext 状态变化时触发（如 suspended → running）。

    audioContext.onstatechange = () => {
      console.log('音频上下文状态:', audioContext.state);
    };
    

二十二、游戏手柄事件

53. gamepadconnected / gamepaddisconnected
    游戏手柄连接或断开时触发。

    window.addEventListener('gamepadconnected', (e) => {
      console.log('手柄已连接:', e.gamepad.id);
    });
    window.addEventListener('gamepaddisconnected', () => {
      alert('手柄已断开！');
    });
    

二十三、其他特殊事件

54. auxclick
    鼠标中键（或其他非主按钮）点击时触发。

    document.addEventListener('auxclick', (e) => {
      if (e.button === 1) console.log('中键点击');
    });
    

55. pointerlockchange
    鼠标指针锁定状态变化时触发（如游戏全屏控制）。

    document.addEventListener('pointerlockchange', () => {
      if (document.pointerLockElement === canvas) {
        console.log('指针已锁定到画布');
      }
    });
    

56. vrdisplaypresentchange
    VR 设备开始或结束呈现时触发（WebVR API）。

    window.addEventListener('vrdisplaypresentchange', () => {
      if (vrDisplay.isPresenting) {
        console.log('已进入 VR 模式');
      }
    });
    

二十四、实时通信事件

57. trackmute / trackunmute
    媒体轨道静音或取消静音时触发（WebRTC）。

    remoteStream.getTracks().forEach(track => {
      track.onmute = () => console.log('轨道被静音');
      track.onunmute = () => console.log('轨道取消静音');
    });
    

58. datachannel
    WebRTC 数据通道建立时触发。

    peerConnection.ondatachannel = (e) => {
      const channel = e.channel;
      channel.onmessage = (e) => console.log('收到数据:', e.data);
    };
    

二十五、安全与权限事件

59. securitypolicyviolation
    内容安全策略（CSP）被违反时触发。

    document.addEventListener('securitypolicyviolation', (e) => {
      console.warn('CSP 违规:', e.blockedURI);
    });
    

60. permissionrequest
    请求权限（如摄像头、地理位置）时触发（实验性 API）。

    navigator.permissions.request({ name: 'geolocation' }).then(result => {
      if (result.state === 'granted') {
        console.log('权限已授予');
      }
    });
    

实战示例合集

61. 组合事件：拖放上传文件

    const dropZone = document.getElementById('drop-zone');
    
    // 阻止默认拖放行为
    dropZone.addEventListener('dragover', (e) => e.preventDefault());
    
    // 处理文件释放
    dropZone.addEventListener('drop', (e) => {
      e.preventDefault();
      const files = e.dataTransfer.files;
      handleFiles(files);
    });
    

62. 组合事件：实时搜索（防抖 + AJAX）

    const searchInput = document.getElementById('search');
    
    // 防抖函数
    const debounce = (fn, delay) => {
      let timer;
      return (...args) => {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
      };
    };
    
    // 输入时触发搜索
    searchInput.addEventListener('input', debounce((e) => {
      fetch(`/search?q=${e.target.value}`)
        .then(response => response.json())
        .then(updateResults);
    }, 300));
    

总结

以上 60+ JavaScript 事件实例 覆盖了：

• 基础交互（点击、滚动、键盘）
• 高级功能（拖放、WebRTC、WebSocket）
• 设备集成（游戏手柄、VR、陀螺仪）
• 性能优化（防抖、被动事件）
• 错误处理与安全

建议结合具体项目需求选择事件，并参考 MDN 事件文档 深入理解细节！