Chrome 开发工具：如何查看 HTML 元素的附加事件侦听器

Question

我正在从调试 Firefox 中的 JS 切换到 Chrome。

我缺少的一件事是：

在 Firefox 中，我可以在 HTML 中看到“[event]”附加了一个自定义事件处理程序。

我认为这个预览非常方便。

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

有没有办法在 chrome 中启用此功能（请参阅树中的事件处理程序）？

Answer 1

您正在寻找的功能在谷歌浏览器开发工具中可用

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

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

希望这是您正在寻找的。

Answer 2

它在 chrome 中可用，您可以在开发人员选项新闻中找到它

( CTRL + SHIFT + I ) 或F12

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

如果找不到，只需找到>>符号并单击它和 select 事件侦听器。

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

Answer 3

我认为您可以使用 chrome 的getEventListners($0) api 来提供特定选定元素的事件侦听器。

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

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

由于这是我的第一个答案并且到目前为止还没有那么大的声誉，因此不允许我直接将图像添加到答案中，所以我真的很抱歉。 请看一下图片：

从我的 chrome 浏览器检查谷歌。