有没有可能在浏览器中查看（调试）DOM元素触发的自定义事件？
假设我想要查看哪个特定的Bootstrap Collapse元素触发了show.bs.collapse event，我是否可以在Chrome开发工具中看到它？
3个回答
9
首先，监视事件 可以处理普通JS事件。然而，Bootstrap事件是jQuery事件，因此纯JS事件侦听器无法侦听它们。
要侦听jQuery事件，请在控制台中运行以下代码片段：
现在，对于另一种方式，查看谁正在监听事件。在元素面板中，如果您转到事件侦听器选项卡并取消选择 "ancestors"，那么您将只看到元素上直接绑定的事件侦听器。这样，您就可以知道是哪个元素在监听事件，以便检查触发事件时应该执行什么操作。这很重要，因为您可能会发现 'body' 没有获取事件，因为它可能已经冒泡取消。因此，如果上面的代码片段不起作用，则需要检查监听事件的元素是否取消了冒泡。
要侦听jQuery事件，请在控制台中运行以下代码片段：
jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});
用你想要的任何事件替换 "shown.bs.collapse"。当它们被记录时，只需检查事件的目标元素即可知道是什么触发了它。现在，对于另一种方式，查看谁正在监听事件。在元素面板中，如果您转到事件侦听器选项卡并取消选择 "ancestors"，那么您将只看到元素上直接绑定的事件侦听器。这样，您就可以知道是哪个元素在监听事件，以便检查触发事件时应该执行什么操作。这很重要，因为您可能会发现 'body' 没有获取事件，因为它可能已经冒泡取消。因此，如果上面的代码片段不起作用，则需要检查监听事件的元素是否取消了冒泡。
- Garbee
2
你可以使用Visual Event 2书签工具。这是一个非常好用的工具，可以检查特定DOM元素附加了哪些事件。请注意保留HTML标签。
- tolkinski
1
还有一个 Chrome 扩展程序，它使用相同的代码 https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim - Dhaval
2
- ronnyfm
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接