在检查员中查找有界事件 [英] Finding bounded events in inspector

问题描述

我一直想知道很长时间。有没有办法在例如Chrome看到什么事件绑定到一个元素？因为许多人现在使用jQuery的语法如下：

I've been wondering a long time about this. Is there a way in eg Chrome to see what events are bound to an element? Since many people now use jQuery with a syntax like the following:

$("a.subtle").click(function(){
    //do something
});

检查员有没有办法轻松找到这个代码？我知道在检查员，你可以去事件监听器-tab看到什么事件绑定。看一个例子，我可以看到有一个点击事件的元素jS文件jQuery旁边，所以这必须指向它，但当然它被所有的jQuery代码模糊。这里是我正在看的：

Is there a way in the inspector to easily find this code? I know in the inspector you can go to the "event listeners"-tab to see what events are bound. Looking at an example I can see there is a click-event on the element with the js file of jQuery next to it, so this must somehow point to it, but of course it is obscured by all the jQuery code. Here's what I'm looking at:

所以问题是，有一个快速的方法来找到应用于元素的jQuery代码？要清楚，我想快速找到我贴在顶部的代码。

So the question is, is there a quick way to find the jQuery code applied to an element? To be clear, I want to quickly find the code I posted up top.

我可以通过源代码搜索 .click ，但当然可以通过它的父类，或 .on（），或者这么多bazillion方法。

I could search through the source code for a .click() on that class, but of course it could be done via its parent, or with .on(), or on so many bazillion ways..

推荐答案

查看 视觉活动小书签。

Visual Event是一个开放源代码的Javascript书签，提供关于附加到DOM元素的事件的调试信息

Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.

视觉事件显示：

• 哪些元素附有事件。


• 附加到元素的事件类型。


• 触发将使用[sic]运行的代码。


• 定义附加函数的源文件和行号（仅限Webkit浏览器和Opera）。

• Which elements have events attached to them.
• The type of events attached to an element.
• The code that will be run with [sic] the event is triggered.
• The source file and line number for where the attached function was defined (Webkit browsers and Opera only).

这篇关于在检查员中查找有界事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！