如何查看ChromeDevTools中的元素上触发的事件？

小开

最佳答案

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

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

小开

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

小开

您可以使用监控事件函数。

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

monitorEvents($0)

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

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

unmonitorEvents($0)

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

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

monitorEvents(document.body, 'mouse')

此可用类型的列表是这里。

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

使用监视器事件函数

小开

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

小开

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

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

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