我从一个库的页面上有一个可定制的表单元素。我想看看当我与它交互时触发了什么javascript事件,因为我试图找出要使用的事件处理程序。
我如何使用Chrome Web开发者做到这一点?
我从一个库的页面上有一个可定制的表单元素。我想看看当我与它交互时触发了什么javascript事件,因为我试图找出要使用的事件处理程序。
我如何使用Chrome Web开发者做到这一点?
当前回答
对于jQuery(至少版本1.11.2),下面的过程适合我。
右键点击元素,打开“Chrome开发者工具” 输入$._data(($0), 'events');在“控制台” 展开附加对象并双击处理程序:value。 这显示了附加函数的源代码,使用“搜索”选项卡搜索其中的一部分。
是时候停止重新发明轮子,开始使用普通的JS事件了…:)
其他回答
Visual Event是一个不错的小书签,您可以使用它来查看元素的事件处理程序。在线演示可以在这里查看。
您可以使用monitorEvents函数。
检查你的元素(鼠标右键点击→检查可见元素或在Chrome开发工具的元素选项卡,选择想要的元素),然后去控制台选项卡,写:
monitorEvents($0)
现在,当您将鼠标移动到该元素上、聚焦或单击它时,将显示触发事件的名称及其数据。
要停止获取此数据,只需将此写入控制台:
unmonitorEvents($0)
$0只是Chrome开发工具选择的最后一个DOM元素。您可以在那里传递任何其他DOM对象(例如getElementById或querySelector的结果)。
还可以指定事件“类型”作为第二个参数,将监视的事件缩小到某个预定义的集合。例如:
monitorEvents(document.body, 'mouse')
截至2023-01-30,可用类型列表如下:
鼠标 "mousedown", "mouseup", "click", "dblclick", "mousemove", "mouseover", "mouseout", "mousewheel" 关键 "keydown", "keyup", "keypress", "textInput" 触摸 touchstart, touchmove, touchend, touchcancel 控制 “调整”、“滚动”、“缩放”、“关注”、“模糊”,“选择”,“改变”, “提交”,“重置”
从这里拍的。
我做了一个小动图来说明这个功能是如何工作的:
这不会显示自定义事件,就像那些你的脚本可能创建的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”
对于jQuery(至少版本1.11.2),下面的过程适合我。
右键点击元素,打开“Chrome开发者工具” 输入$._data(($0), 'events');在“控制台” 展开附加对象并双击处理程序:value。 这显示了附加函数的源代码,使用“搜索”选项卡搜索其中的一部分。
是时候停止重新发明轮子,开始使用普通的JS事件了…:)
要列出Chrome中窗口对象上的所有事件处理程序,您可以键入window. geteventlisteners (window)或特定元素window. geteventlisteners (document.body)