JS入门：如何为document或window添加监听所有事件的通用监听器？

实现思路 #

• 浏览器没有提供直接监听所有事件的通配符，因此我们需要先枚举目标对象（window/document）上支持的所有事件类型
• 遍历所有事件类型，逐个绑定事件监听器
• 事件触发时在控制台打印事件相关信息

完整可运行代码 #

以下是监听window所有事件的代码，复制到控制台即可运行：

// 存储已绑定的事件名，避免重复绑定
const boundEvents = new Set();

// 遍历window所有属性，筛选出on开头的事件相关属性
for (const prop in window) {
  if (prop.startsWith('on')) {
    // 去掉前缀on，得到标准事件名，比如onclick转为click
    const eventName = prop.slice(2);
    if (!boundEvents.has(eventName)) {
      boundEvents.add(eventName);
      // 逐个绑定事件监听器
      window.addEventListener(eventName, (event) => {
        console.log(`触发事件：${eventName}`, event);
      }, false);
    }
  }
}

使用说明 #

• 如果需要监听document而非window，只需要把代码中所有的window替换为document即可
• 控制台会同步输出事件名称和完整事件对象，展开事件对象可查看触发元素、触发坐标等详细信息
• 如果不需要监听高频触发的事件（比如mousemove、scroll），可以在遍历阶段加判断跳过：if (eventName === 'mousemove') continue;

快速测试简化版 #

如果只是临时测试，可以直接用下面的精简代码：

Object.keys(window).forEach(key => /^on/.test(key) && window.addEventListener(key.slice(2), e => console.log(key.slice(2), e)))

注意事项 #

• 上述方法只能监听浏览器原生支持的标准事件，如果需要监听页面自定义的事件，需要手动把自定义事件名添加到监听列表中

内容的提问来源于stack exchange，提问作者Musicman