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

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

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

您可以使用监视事件功能。

只需检查您的元素（→可见元素上，或转到Chrome开发人员工具中的选项卡并选择所需的元素），然后转到选项卡并编写：right mouse clickInspectElementsConsole

monitorEvents($0)

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

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

unmonitorEvents($0)

$0 只是 Chrome Developer Tools 选择的最后一个 DOM 元素。您可以在其中传递任何其他 DOM 对象（例如 或 的结果）。getElementByIdquerySelector

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

monitorEvents(document.body, 'mouse')

此可用类型的列表在此处。

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