我在库中的页面上有一个可自定义的表单元素。我想查看在与它交互时触发了哪些 javascript 事件，因为我试图找出要使用的事件处理程序。
我如何使用 Chrome Web Developer 做到这一点？
如何查看 Chrome DevTools 中元素触发的事件？
IT技术
javascript
google-chrome-devtools
2021-02-04 04:22:49
5个回答
- 点击F12打开开发工具
- 单击源选项卡
- 在右侧，向下滚动到“事件侦听器断点”，然后展开树
- 单击要收听的事件。
- 与目标元素交互，如果它们触发，您将在调试器中获得一个断点
同样，您可以右键单击目标元素-> 选择“检查元素”在开发框架的右侧向下滚动，底部是“事件侦听器”。展开树以查看附加到元素的事件。不确定这是否适用于通过冒泡处理的事件（我猜不是）
您可以使用monitorEvents函数。
只需检查您的元素（right mouse click→Inspect在可见元素上或转到ElementsChrome 开发者工具中的选项卡并选择想要的元素）然后转到Console选项卡并编写：
monitorEvents($0)
现在，当您将鼠标移到该元素上、聚焦或单击它时，触发事件的名称将与其数据一起显示。
要停止获取此数据，只需将其写入控制台：
unmonitorEvents($0)
$0只是 Chrome 开发者工具选择的最后一个 DOM 元素。您可以在那里传递任何其他 DOM 对象（例如getElementById或 的结果querySelector）。
您还可以将事件“类型”指定为第二个参数，以将受监控的事件范围缩小到某个预定义的集合。例如：
monitorEvents(document.body, 'mouse')
此可用类型的列表在这里。
我做了一个小 gif 来说明这个功能是如何工作的：
Visual Event是一个不错的小书签，您可以使用它来查看元素的事件处理程序。关于在线演示可以在这里查看。
对于 jQuery（至少 1.11.2 版），以下过程对我有用。
- 右键单击该元素并打开“Chrome 开发人员工具”
- 键入
$._data(($0), 'events');在“控制台” - 展开附加的对象并双击该
handler:值。 - 这显示了附加函数的源代码，使用“搜索”选项卡搜索其中的一部分。
是时候停止重新发明轮子并开始使用普通的 JS 事件了……:)
如果它是 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”