JavaScript 作为一门交互式语言，大量使用事件来响应用户操作。在开发过程中，我们经常需要确定哪些事件被触发以便调试和优化代码。本文将介绍如何使用现有的工具和技术来找出哪些 JavaScript 事件被触发，并提供示例代码进行演示。
使用 console.log() 来调试
console.log() 是一个用于输出日志信息的方法，可以用来调试 JavaScript 代码。你可以在需要调试的事件处理程序中添加 console.log()，并输出相关的信息。例如：
document.addEventListener('click', function(event) {
console.log('click event triggered:', event.target);
});这段代码会在用户单击页面上的任何元素时记录下该元素的信息。在浏览器的开发者工具中查看控制台，就可以看到相应的日志信息。
使用 console.log() 的好处是它简单易用，无需安装任何插件或工具，适用于各种场景。但缺点也很明显：当事件触发数量较多时，输出日志信息可能会变得混乱不堪甚至影响性能。因此，我们需要更高级的调试工具。
使用 Chrome 开发者工具
Chrome 开发者工具提供了强大的调试功能，包括实时监控事件。在 Chrome 中按下 F12 键打开开发者工具，选择 Elements 标签页，在右侧的面板中可以看到 Event Listeners 面板。
通过此面板，我们可以看到当前元素绑定了哪些事件处理程序，并且可以直接跳转到相应代码位置进行调试。这个功能非常实用，特别是当你需要排查代码中的事件冲突或性能问题时。
使用第三方 JavaScript 调试工具
除了 Chrome 开发者工具外，还有许多第三方 JavaScript 调试工具可以帮助我们找出事件触发情况。例如 debugger.js 和 whydidyourender。它们提供了更加强大和灵活的调试功能。
这里以 whydidyourender 为例进行演示。whydidyourender 是一个 React 组件，可以帮助我们找出不必要的组件渲染。但它也可以用来追踪事件触发情况。安装后，只需在入口文件中加入以下代码：
import React from 'react';
import { whyDidYouRender } from '@welldone-software/why-did-you-render';
if (process.env.NODE_ENV !== 'production') {
whyDidYouRender(React);
}这样，在运行应用时，whydidyourender 将会输出页面上所有的事件触发情况。你可以通过过滤器和排序来快速找到你需要的信息。
总结
本文介绍了如何使用 console.log()、Chrome 开发者工具和第三方 JavaScript 调试工具来找出哪些 JavaScript 事件被触发。在实际开发中，我们可以根据具体情况选择最适合自己的工具进行调试。调试是前端开发中非常重要的一环，能够帮助我们更快地找到问题并解决它们。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10699