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

Question

我在库的页面上有一个可自定义的表单元素。我想看看与它交互时会触发哪些 JavaScript 事件，因为我试图找出要使用的事件处理程序。

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

Answer 1

您可以使用monitorEvents功能。

只需检查您的元素（可见元素上的

right mouse click

→

Inspect

或转到 Chrome 开发人员工具中的

Elements

选项卡并选择所需元素），然后转到

Console

选项卡并写入：

monitorEvents($0)

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

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

unmonitorEvents($0)

$0

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

getElementById

或

querySelector

的结果）。

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

monitorEvents(document.body, 'mouse')

截至 2023 年 1 月 30 日，可用类型列表如下：

• 鼠标
  “mousedown”，“mouseup”，“click”，“dblclick”，“mousemove”，“mouseover”，“mouseout”，“mousewheel”
• 键
  “keydown”，“keyup”，“keypress”，“textInput”
• 触摸
  “触摸开始”，“触摸移动”，“触摸结束”，“触摸取消”
• 控制
  “调整大小”、“滚动”、“缩放”、“聚焦”、“模糊”、“选择”、“更改”、 “提交”、“重置”

取自此处。

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

Answer 2

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

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

Answer 3

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

Answer 4

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

1. 右键单击该元素并打开“Chrome 开发者工具”
2. 在“控制台”中输入

   $._data(($0), 'events');

3. 展开附加对象并双击

   handler:

   值。
4. 这显示了附加函数的源代码，使用“搜索”选项卡搜索部分代码。

是时候停止重新发明轮子并开始使用普通 JS 事件了......:)

Answer 5

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

Answer 6

要列出 Chrome 中窗口对象上的所有事件处理程序，您可以键入

window.getEventListeners(window)

或针对特定元素

window.getEventListeners(document.body)