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

Posted 2023-03-07

【中文标题】在浏览器中调试自定义 DOM 事件

【英文标题】：Debugging custom DOM events in browser

【发布时间】：2015-08-02 21:50:39

【问题描述】：

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

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

【参考方案1】：

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

【讨论】：

还有一个 chrome 扩展，它使用相同的代码 chrome.google.com/webstore/detail/visual-event/…

【参考方案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/

【参考方案3】：

首先，Monitor Events 将处理正常的 JS 事件。然而，Bootstrap 事件是 jQuery 事件，所以 vanilla JS 事件监听器不会监听它们。

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

用你想要的任何事件替换“shown.bs.collapse”。当它们被记录时，只需检查事件的目标元素就知道是什么触发了它。

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