在浏览器中调试自定义 DOM 事件

Debugging custom DOM events in browser

是否可以看到(调试)自定义事件从浏览器中的 DOM 元素触发?

假设我想查看 Bootstrap 崩溃的哪个特定元素触发了 show.bs.collapse event,我能否以某种方式在 Chrome 开发工具中看到它?

首先,Monitor Events 将为正常的 JS 事件处理此问题。但是,Bootstrap 事件是 jQuery 事件,因此普通 JS 事件侦听器不会侦听它们。

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

将 "shown.bs.collapse" 替换为您想要的任何事件。记录它们时,只需检查事件的目标元素即可了解是什么触发了它。

现在,反过来,看看什么是监听事件。在元素面板中,如果您转到事件侦听器选项卡并取消选中 "ancestors",那么您将只会看到元素上直接绑定的事件侦听器。这样你就知道什么在监听这个事件,这样你就可以检查当它被触发时应该做什么。这很重要,因为您可能会发现 'body' 没有收到事件,因为冒泡可能已被取消。因此,如果上面的代码片段不起作用,您需要检查监听事件的元素中的气泡取消。

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/

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