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

按 F12 打开开发工具

单击源选项卡

在右侧，向下滚动到“事件侦听器断点”，然后展开树

单击要收听的事件。

与目标元素交互，如果它们触发，您将在调试器中获得一个断点

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

---

您可以使用 monitorEvents 功能。

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

monitorEvents($0)

现在，当您将鼠标移到该元素上、聚焦或单击它时，触发事件的名称将与其数据一起显示。

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

unmonitorEvents($0)

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

您还可以将事件“类型”指定为第二个参数，以将监控的事件范围缩小到一些预定义的集合。例如：

monitorEvents(document.body, 'mouse')

此可用类型的列表是 here。

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

https://i.stack.imgur.com/goJAx.gif

---

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

---

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

右键单击元素并打开“Chrome 开发者工具”类型 $._data(($0), 'events');在“控制台”中展开附加对象并双击处理程序：值。这显示了附加函数的源代码，使用“搜索”选项卡搜索其中的一部分。

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

https://i.stack.imgur.com/oqVlc.png

---

如果它是 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”

---