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

Question

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

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

Answer 1

• 点击 F12 打开开发工具
• 单击“来源”选项卡
• 在右侧，向下滚动到“Event Listener Breakpoints”，然后展开树
• 点击您要收听的活动。
• 与目标元素交互，如果它们触发，您将在调试器中获得一个断点

同样，您可以右键单击目标元素 - ＆gt;选择“检查元素”向下滚动开发框架的右侧，底部是“事件监听器”。展开树以查看附加到元素的事件。不确定这是否适用于通过冒泡处理的事件（我猜不是）

Answer 2

您可以使用monitorEvents功能。

只需在可见元素上检查您的元素（right mouse click→Inspect或转到Chrome开发者工具中的Elements标签，然后选择所需元素），然后转到Console标签，写：

monitorEvents($0)

现在，当您将鼠标移到此元素上时，无论是焦点还是单击它，都会显示已触发事件的名称及其数据。

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

unmonitorEvents($0)

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

您还可以将事件“type”指定为第二个参数，以将受监控事件缩小到某个预定义集。例如：

monitorEvents(document.body, 'mouse')

此可用类型的列表为here。

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

Answer 3

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

Answer 4

对于jQuery（至少版本1.11.2），以下过程适用于我。

1. 右键点击元素，然后打开Chrome开发者工具＆＃39;
2. 在＆＃39;控制台＆＃39;
中输入$._data(($0), 'events');
3. 展开附加的对象，然后双击handler:值。
4. 这显示附加功能的源代码，使用＆＃39;搜索功能搜索部分功能。标签。

现在是时候停止重新发明轮子并开始使用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”