查找连接/使用Chrome开发工具元素的结合事件/萤火虫/ IE开发工具栏(Find attache

2019-06-25 12:56发布

当检查页面的DOM,我想快点知道元素的附加事件(S)

例如,如果一个按钮有这个HTML DOM

<button id="button1">Click Me</button>

和地方(不是我事先知道的地方),它有附加的事件,例如,

$("#button1").click(function(){...});

我知道它可以通过编程来完成( 我能找到绑定使用jQuery的元素上的事件? )

但有仅使用的开发工具为Chrome /火狐/ IE一见的事件列表的方法吗?


更新 :我发现在新版Chrome我有一个标签叫事件侦听器 ,但似乎它不允许容易钻到一路下跌到事件的来源,如jQuery的包装原

Answer 1:

FireQuery - http://firequery.binaryage.com/让你看到势必元素的事件,并深入到他们



Answer 2:

为了得到第一个$(“#Button1的”)元素上的第一个连接处理程序

$._data($("#button1").get(0),"events").click[0].handler

的jsfiddle

在很长的故事,没有人愿意听到的: 我来这里寻找一个插件。 我很高兴看到@ schmidlop的答案,但在jQuery中实际上并没有给我,我要找的监听器,它只是显示了jQuery的事件,最终调用特定回调的通用处理器。 我还在寻找一个Chrome的插件,让我右键点击一个元素,让我钻到附着在物体上的处理程序。

因为,那会很酷。

更新:我发现了一个Chrome扩展名为jQuery的调试器。 您只需“检查元素”和“元素”子菜单...选择“jQuery的事件” https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi



Answer 3:

现在有Chrome的事件监听器选项卡。



Answer 4:

随着Chrome检查从“控制台”选项卡中可以看到附着在元素与事件中的“元素”选项卡中选择元素,然后getEventListeners($0);



Answer 5:

Firefox的开发者工具,现在显示“EV”旁边具有结合事件的元素。 这可以用来检查绑定事件(包括jQuery的事件)。

下面是检测从“第一段落”元件的一个例子的jQuery点击文档 :



Answer 6:

您还可以检查适用于Chrome视觉事件的插件。



文章来源: Find attached / bound events of an element using Chrome Development Tools / Firebug / IE Developer Toolbar