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

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);});
用你想要的任何事件替换“shown.bs.collapse”。当它们被记录时，只需检查事件的目标元素即可知道是什么触发了它。

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