Javascript 如何查看 Chrome DevTools 中元素触发的事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10213703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I view events fired on an element in Chrome DevTools?
提问by John Hoffman
I have a customizable form element on a page from a library. I want to see what javascript events are fired when I interact with it because I am trying to find out which event handler to use.
我在库的页面上有一个可自定义的表单元素。我想查看与它交互时触发了哪些 javascript 事件，因为我试图找出要使用的事件处理程序。
How do I do that using Chrome Web Developer?
我如何使用 Chrome Web Developer 做到这一点？
回答by Matt
- Hit F12to open Dev Tools
- Click the Sources tab
- On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
- Click on the events you want to listen for.
- Interact with the target element, if they fire you will get a break point in the debugger
- 点击F12打开开发工具
- 单击源选项卡
- 在右侧，向下滚动到“事件侦听器断点”，然后展开树
- 单击要收听的事件。
- 与目标元素交互，如果它们触发，您将在调试器中获得一个断点
Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)
同样，您可以右键单击目标元素-> 选择“检查元素”在开发框架的右侧向下滚动，底部是“事件侦听器”。展开树以查看哪些事件附加到元素。不确定这是否适用于通过冒泡处理的事件（我猜不是）
回答by Mariusz Pawelski
You can use monitorEventsfunction.
您可以使用monitorEvents函数。
Just inspect your element (right mouse click→ Inspecton visible element or go to Elementstab in Chrome Developer Tools and select wanted element) then go to Consoletab and write:
只需检查您的元素（right mouse click→Inspect在可见元素上或转到ElementsChrome 开发者工具中的选项卡并选择想要的元素）然后转到Console选项卡并编写：
monitorEvents(unmonitorEvents(monitorEvents(document.body, 'mouse')
)
)
Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.
现在，当您将鼠标移到该元素上、聚焦或单击它时，触发事件的名称将与其数据一起显示。
To stop getting this data just write this to console:
要停止获取此数据，只需将其写入控制台：
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);
})
});
$0is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of getElementByIdor querySelector).
$0只是 Chrome 开发者工具选择的最后一个 DOM 元素。您可以在那里传递任何其他 DOM 对象（例如getElementById或 的结果querySelector）。
You can also specify event "type" as second parameter to narrow monitored events to some predefined set. For example:
您还可以将事件“类型”指定为第二个参数，以将监视的事件缩小到某个预定义的集合。例如：
##代码##List of this available types is here.
此可用类型的列表在这里。
I made a small gif that illustrates how this feature works:
我做了一个小 gif 来说明这个功能是如何工作的：
回答by tifkin
Visual Eventis a nice little bookmarklet that you can use to view an element's event handlers. On online demo can be viewed here.
Visual Event是一个不错的小书签，您可以使用它来查看元素的事件处理程序。关于在线演示可以在这里查看。
回答by Daniel Sokolowski
For jQuery (at least version 1.11.2) the following procedure worked for me.
对于 jQuery（至少 1.11.2 版），以下过程对我有用。
- Right click on the element and open 'Chrome Developer Tools'
- Type
$._data(($0), 'events');in the 'Console' - Expand the attached objects and double click the
handler:value. - This shows the source code of the attached function, search for part of that using the 'Search' tab.
- 右键单击该元素并打开“Chrome 开发人员工具”
- 键入
$._data(($0), 'events');在“控制台” - 展开附加的对象并双击该
handler:值。 - 这显示了附加函数的源代码，使用“搜索”选项卡搜索其中的一部分。
And it's time to stop re-inventing the wheel and start using vanilla JS events ... :)
是时候停止重新发明轮子并开始使用普通的 JS 事件了……:)
回答by airtonix
This won't show custom events like those your script might create if it's a jquery plugin. for example :
如果它是 jquery 插件，这不会显示像您的脚本可能创建的自定义事件。例如 ：
##代码##The Event Panel under Scripts in chrome developer tools will not show you "Something:custom-event-one"
chrome 开发者工具中脚本下的事件面板不会显示“Something:custom-event-one”
