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

类似地，你可以右键点击目标元素——> select "inspect element"在dev框架的右侧向下滚动，底部是'event listeners'。展开树，查看元素附加了哪些事件。不确定这是否适用于通过冒泡处理的事件(我猜不是)

这不会显示自定义事件，就像那些你的脚本可能创建的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”

您可以使用monitorEvents函数。

检查你的元素(鼠标右键点击→检查可见元素或在Chrome开发工具的元素选项卡，选择想要的元素)，然后去控制台选项卡，写:

monitorEvents($0)

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

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

unmonitorEvents($0)

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

还可以指定事件“类型”作为第二个参数，将监视的事件缩小到某个预定义的集合。例如:

monitorEvents(document.body, 'mouse')

截至2023-01-30，可用类型列表如下:

鼠标 "mousedown"， "mouseup"， "click"， "dblclick"， "mousemove"， "mouseover"， "mouseout"， "mousewheel" 关键 "keydown"， "keyup"， "keypress"， "textInput" 触摸 touchstart, touchmove, touchend, touchcancel 控制 “调整”、“滚动”、“缩放”、“关注”、“模糊”,“选择”,“改变”, “提交”,“重置”

从这里拍的。

我做了一个小动图来说明这个功能是如何工作的:

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

对于jQuery(至少版本1.11.2)，下面的过程适合我。

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

是时候停止重新发明轮子，开始使用普通的JS事件了…：）

要列出Chrome中窗口对象上的所有事件处理程序，您可以键入window. geteventlisteners (window)或特定元素window. geteventlisteners (document.body)