如何查看Chrome DevTools中某个元素上触发的事件？

我从库的页面上有一个可自定义的表单元素。 我想查看与之交互时触发了哪些javascript事件，由于我试图找出要使用的事件处理程序。

如何使用Chrome Web Developer作到这一点？

---

#1楼

• 点击F12打开开发工具
• 点击来源标签
• 在右侧，向下滚动到“事件侦听器断点”，而后展开树
• 单击您想听的事件。
• 与目标元素进行交互，若是它们触发，您将在调试器中获得一个断点

一样，您能够右键单击目标元素->选择“检查元素”。在开发框架的右侧向下滚动，底部是“事件侦听器”。 展开树以查看将哪些事件附加到元素。 不知道这是否适用于经过冒泡处理的事件（我猜不是）

---

#2楼

若是它是一个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开发人员工具中“脚本”下的“事件面板”不会显示“ Something：custom-event-one”

---

#3楼

您能够使用monitorEvents函数。

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

monitorEvents($0)

如今，当您将鼠标移到该元素上，进行焦点或单击时，将触发事件的名称及其数据。

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

unmonitorEvents($0)

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

您还能够将事件“类型”指定为第二个参数，以将监视的​​事件缩小到某个预约义的集合。 例如：

monitorEvents(document.body, 'mouse')

这些可用类型的列表在这里 。

我作了一个小gif，说明了此功能的工做原理：

---

#4楼

Visual Event是一个不错的小书签，可用于查看元素的事件处理程序。 在线演示能够在这里查看。

---

#5楼

对于jQuery（至少是1.11.2版），如下过程对我有用。

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

如今是时候中止从新发明轮子了，开始使用原始JS事件... :)