Chrome DevTools：如何查看 DOM 元素附加的事件侦听器

Question

我正在从 Firefox 中调试 JS 切换到 Chrome 的开发工具。

我缺少的一件事是：

Firefox 的 Inspector 选项卡显示“[event]”标签，表明附加了自定义事件处理程序。我认为这个预览非常方便。

但是在 Chrome 中，我需要显式搜索事件处理程序。

是否也可以在 Chrome 中启用此功能（请参阅树中的事件处理程序）？

Answer 1

您正在寻找的功能可在 google chrome 开发工具中找到

我已经采取了，堆栈溢出页面本身的作业链接，它有一个单击事件处理程序，要查看事件处理程序，请选择右侧部分的“事件监听器”选项卡（以红色突出显示），它有可能被隐藏通过 >> ，点击展开，

如果祖先复选框被选中，请取消选中此复选框，然后您将清楚地看到哪个事件（例如单击）、哪个元素（例如锚标记）以及在哪个文件的右侧带有行号，单击它即可导航到那里。

希望这是您正在寻找的。

Answer 2

它在 Chrome 中可用，您可以在开发者选项中找到它，按

（CTRL+SHIFT+I）或F12

然后，如果开发人员选项处于全屏模式，您会在右上角找到名为“事件侦听器”的选项卡，否则您会在右下角找到它。

如果您找不到，只需找到

>>

符号并单击它并选择事件监听器。

这是事件侦听器选项卡的图像。

Answer 3

我认为你可以使用 getEventListners($0) chrome api，它提供特定选定元素的事件监听器。

getEventListners($0) 其中 $0 - DOM 中选定的元素。

可以通过单击 Esc 键将控制台抽屉添加到“元素”选项卡，它将切换控制台抽屉。然后在控制台中，您可以编写 getEventListners($0)，如图所示。

由于这是我的第一个答案，到目前为止还没有那么高的声誉，它不允许我直接将图像添加到答案中，所以我对此感到非常抱歉。请看一下图片：

从我的 Chrome 浏览器检查 google。