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

427

我在库中的页面上有一个可自定义的表单元素。我想查看当我与它交互时发生了什么JavaScript事件，因为我试图找出使用哪个事件处理程序。如何查看在Chrome DevTools中的元素上触发的事件？

我该如何使用Chrome Web Developer？

来源

2012-04-18 John Hoffman

+11

这个书签可以帮助：http://www.sprymedia.co .uk/article/Visual + Event + 2 – scytale 2012-10-10 12:11:16

这里的答案很有价值，但上面的小书签实际上是解决了我的问题。 http://www.sprymedia.co.uk/article/Visual+Event+2 – Jazzy 2014-07-15 20:39:55

693

命中F12打开开发工具
单击源选项卡
在右手边，向下滚动到“事件监听器断点”，并展开树
点击事件，你想听。
交互目标元素，如果他们解雇你会在调试器中拿到一个破发点

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

来源

2012-04-18 16:29:12 Matt

这个解决方案是一个问题，如果它是鼠标事件后，因为断点杀死流程 – WendyG 2014-05-14 13:11:54

+47

如果所有事件指向缩小jquery i不关心，我如何达到使用该jQuery的功能。 – 2014-10-01 19:15:27

+10

它可以显示由我创建的自定义事件吗？当我读到它改变了我的第一个想法的生活。我想念什么？ – Tebe 2014-10-24 08:06:38

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

来源

2012-07-15 23:42:22 airtonix

+14

那么，如何找到这些事件呢？ – Calydon 2015-11-21 00:45:51

565

可以使用monitorEvents功能。

只是检查你的元素（right mouse click→Inspect可见元件上，或者去Elements标签在Chrome开发者工具，并选择想要的元素），然后去Console选项卡，并写上：

monitorEvents($0)

现在，当您在移动鼠标这个元素，关注或者点击它，被触发的事件的名字将和它的数据一起显示。

停止收到这个数据只是写这个安慰：

unmonitorEvents($0)

$0只是通过Chrome开发者工具上次选择的DOM元素。您可以在那里传递任何其他DOM对象（例如，结果为getElementById或querySelector）。

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

monitorEvents(document.body, 'mouse')

这种可用类型的列表是here。

我做了一个小的GIF，说明此功能的工作原理：

usage of monitorEvents function

来源

2013-04-10 10:50:36

+26

这个答案是好多了，并且确实问到了什么（可能该功能在2012年不可用） – llamerr 2014-04-02 11:09:34

这应该是新接受的答案 – jpwynn 2015-02-26 20:21:20

同意。这是监视和追踪* specific *元素事件的事实方式。 – dmackerman 2015-04-10 18:49:35

Visual Event是一个可爱的小书签，你可以用它来查看元素的事件处理程序。在线演示可以查看here。

来源

2014-03-21 20:12:51 arwan

它不能用作瑞士军队的工具。从我的观点来看，这是为了新手。 – 2016-02-26 06:14:57

也可作为Chrome扩展程序使用：https：//chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim – pelms 2017-02-16 14:50:14

感谢它为我工作得很好 – 2017-08-08 20:34:12

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

在“控制台”
展开附着物右键单击元素并打开“Chrome开发者工具”
类型$._data(($0), 'events');并双击handler:值。
这显示了附加功能的源代码，使用“搜索”选项卡搜索部分内容。

是时候停止重新发明轮子，并开始使用香草JS事件... :)

来源

2016-07-14 15:11:53

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

回答

相关问题