如何在Chrome DevTools中查看针对元素触发的事件？

Question

我在库的页面上有一个可自定义的表单元素.我希望看到当我与它交互时会触发哪些javascript事件,因为我试图找出要使用的事件处理程序.

如何使用Chrome Web Developer完成此操作？

Answer 1

• 点击F12打开Dev Tools
• 单击"源"选项卡
• 在右侧,向下滚动到"Event Listener Breakpoints",然后展开树
• 单击要收听的事件.
• 与目标元素交互,如果它们触发,您将在调试器中获得一个断点

同样,你可以右键点击目标元素 - >选择"检查元素"向下滚动的开发框架的右侧,底部是"事件侦听器".展开树以查看附加到元素的事件.不确定这是否适用于通过冒泡处理的事件(我猜不是)

Answer 2

您可以使用monitorEvents函数.

只需检查您的元素(right mouse click→ Inspect在可见元素上或转到ElementsChrome开发者工具中的标签并选择想要的元素)然后转到Console选项卡并写入:

monitorEvents($0)

现在,当您将鼠标移到此元素上,焦点或单击它时,将显示已触发事件的名称及其数据.

要停止获取此数据,只需将其写入控制台:

unmonitorEvents($0)

$0只是Chrome开发者工具选择的最后一个DOM元素.您可以在那里传递任何其他DOM对象(例如,getElementById或的结果querySelector).

您还可以将事件"type"指定为第二个参数,以将受监视事件缩小到某个预定义集.例如:

monitorEvents(document.body, 'mouse')

这可用类型的列表是在这里.

我做了一个小gif,说明了这个功能是如何工作的:

Answer 3

Visual Event是一个很好的小书签,可用于查看元素的事件处理程序.在线演示可以在这里查看.

Answer 4

对于jQuery(至少版本1.11.2),以下过程适用于我.

1. 右键单击元素并打开"Chrome Developer Tools"
2. 键入$._data(($0), 'events');在"控制台"
3. 展开附加的对象,然后双击该handler:值.
4. 这显示了附加功能的源代码,使用"搜索"选项卡搜索其中的一部分.

现在是时候停止重新发明轮子并开始使用vanilla JS事件...... :)

Answer 5

如果它是一个jquery插件,这不会显示脚本可能创建的自定义事件.例如 :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

Chrome开发人员工具中Scripts下的事件面板不会显示"Something:custom-event-one"