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

我从库中的页面上有一个可定制的表单元素。 我想看看什么JavaScript事件被激发，当我与它交互，因为我想找出哪个事件处理程序使用。

我如何使用Chrome Web Developer来做到这一点？

Answer 1

• 点击F12打开开发工具
• 点击Sources选项卡
• 在右侧，向下滚动到“事件监听器断点”，并展开树
• 点击你想听的事件。
• 与目标元素进行交互，如果他们触发，您将在debugging器中获得一个中断点

同样，你可以右击目标元素 – >select“检查元素”向下滚动在开发框架的右侧，底部是“事件监听器”。 展开树来查看附加到元素的事件。 不知道这是否适用于通过冒泡处理的事件（我猜不是）

Answer 2

你可以使用monitorEvents函数。

只要检查你的元素（ right mouse click → Inspect可见元素或转到Chrome开发工具中的Elements选项卡，并select想要的元素），然后去Console选项卡，并写：

 monitorEvents($0) 

现在，当你将鼠标移到这个元素上时，焦点或者点击它，被触发的事件的名字将和它的数据一起显示出来。

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

 unmonitorEvents($0) 

$0只是Chrome Developer Toolsselect的最后一个DOM元素。 您可以在那里传递任何其他DOM对象（例如， getElementById或querySelector结果）。

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

 monitorEvents(document.body, 'mouse') 

这种可用types的列表在这里 。

我做了一个小的gif，说明了这个function的工作原理：

Answer 3

Visual Event是一个不错的小书签，您可以使用它来查看元素的事件处理程序。 在线演示可以在这里查看。

Answer 4

这不会显示像脚本可能创build的自定义事件，如果它是一个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开发人员工具脚本下的“事件面板”不会向您显示“某件事：自定义事件一”

Answer 5

对于jQuery（至less版本1.11.2）下面的程序为我工作。

1. 右键单击元素并打开“Chrome开发人员工具”
2. input$._data(($0), 'events'); 在“控制台”
3. 展开附加的对象，然后双击handler:值。
4. 这显示了附加function的源代码，使用“search”选项卡search部分。

现在是时候停止重新发明轮子，并开始使用香草JS事件… 🙂