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

Question

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

假设我想看看Bootstrap Collapse的哪个特定元素触发show.bs.collapse事件,我可以以某种方式在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"替换为您想要的任何事件.记录它们时,只需检查事件的目标元素即可知道触发它的内容.

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