在浏览器

Question

是否可以在浏览器中看到（调试）从DOM元素触发的自定义事件？

让我们说我想看看Bootstrap Collapse的哪个特定元素触发了show.bs.collapse event，我可以以某种方式在Chrome露水工具中看到它吗？

Answer 1

首先，Monitor Events将处理普通JS事件。但是，Bootstrap事件是jQuery事件，因此vanilla JS事件监听器不会监听它们。

要收听jQuery事件，请在控制台中运行以下代码段： jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});

替换＆＃34; shown.bs.collapse＆＃34;无论你想要什么事。记录它们时，只需检查事件的目标元素即可知道触发它的内容。

现在，换句话说，看看正在聆听事件是什么。在元素面板中，如果您转到事件侦听器选项卡并取消选中＆＃34; ancestors＆＃34;，那么您将只看到元素上的直接绑定事件侦听器。通过这种方式，您可以了解正在侦听事件的内容，以便您可以检查触发事件时应该执行的操作。这很重要，因为你可能会发现＆＃39; body＆＃39;没有得到这个活动，因为它可能会取消冒泡。因此，如果上述代码段不起作用，则需要检查侦听事件的元素中的气泡取消。

Answer 2

Firefox提供开箱即用的jQuery事件监听器，https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

但你可以扩展它：http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/

Answer 3

您可以使用Visual Event 2 bookmarklet。用于检查哪些事件附加到特定DOM元素的好工具。