Javascript 如何在ChromeDevTools中查看在元素上激发的事件？

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

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

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

---

类似地，您可以右键单击目标元素->选择dev框架右侧的“inspect element”向下滚动，底部是“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 developer tools中脚本下的事件面板不会显示“某物：自定义事件一”

您可以使用该函数

只需检查元素（

鼠标右键单击

→ <代码>在可见元素上检查，或转到Chrome Developer Tools中的

元素

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

控制台

选项卡并写入：

monitorEvents($0)

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

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

unmonitorEvents($0)

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

getElementById

或

querySelector

的结果）

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

monitorEvents(document.body, 'mouse')

此可用类型的列表为

我制作了一个小gif，演示了此功能的工作原理：

是一个很好的小书签，可以用来查看元素的事件处理程序。在线演示可以查看。

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

右键单击元素并打开“Chrome开发者工具”

键入

$。\u数据（$0），“事件”）在“控制台”中

展开附加对象并双击

处理程序：

值

这显示了附加函数的源代码，使用“搜索”选项卡搜索其中的一部分

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

---

这个bookmarklet很有用：这里的答案很有价值，但上面的bookmarklet^实际上解决了我的问题。如果是鼠标事件，那么这个解决方案就是一个问题，因为断点会终止流程。如果所有事件都指向我不关心的缩小的jquery，那么我如何到达使用该jquery的函数。它能显示我创建的自定义事件吗？当我读到它改变了我的生活时，这是我想到的第一件事。我错过了什么吗？@MuhammadUmer你可以黑盒jQuery，这样Chrome就可以跳过它直接进入你的源代码。我检查了事件监听器的框架监听器，但仍然没有看到主干的事件监听器。有什么想法吗？同意。这是监视和跟踪特定元素事件的实际方法。这仍然有效吗？当我键入此命令时，控制台中显示“undefined”，并且似乎没有发生任何监视。啊，是的，我明白了。正是“未定义”让我感到厌烦，但我现在看到你的动画GIF中也有同样的内容。谢谢。@MariuszPawelski接下来怎么办？我这样做了，发现了我感兴趣的点击事件。但是当我点击元素时，我如何找到发生了什么？执行什么样的代码？我应该搜索

MouseEvent

的哪个属性？但是在哪里可以找到处理程序，例如单击处理程序。那么，如何找到这些事件呢？在Chrome中，这些事件可以找到您