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

Question

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

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

Answer 1

首先，Monitor Events将针对正常的JS事件进行处理。但是，Bootstrap事件是jQuery事件，因此普通JS事件监听器不会监听它们。

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

将“ shown.bs.collapse”替换为您想要的任何事件。记录它们后，只需检查事件的目标元素即可知道触发了该事件的原因。

现在，反过来，查看事件的监听。在元素面板中，如果转到事件侦听器选项卡并取消选中“祖先”，那么您将仅看到元素上直接绑定的事件侦听器。这样，您可以知道正在侦听事件的内容，因此可以检查触发事件时应执行的操作。这很重要，因为您可能会发现“ body”没有收到事件，因为它可能取消了冒泡。因此，如果以上代码段无效，则需要在侦听事件的元素中检查是否取消了气泡消除功能。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9jQnRYNS5wbmcifQ==” alt =“显示直接事件侦听器”>

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小书签。用于检查哪些事件附加到特定DOM元素的好工具。