我能找到用jQuery绑定到元素上的事件吗?-CanIfindeventsboundonanelementwithjQuery?

462  

In modern versions of jQuery, you would use the $._data method to find any events attached by jQuery to the element in question. Note, this is an internal-use only method:

在现代jQuery版本中，您将使用$。_data方法，以查找由jQuery附加到该元素的任何事件。注意，这是一个内部使用的方法:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

The result from $._data will be an object that contains both of the events we set (pictured below with the mouseout property expanded):

美元的结果。_data将是一个包含我们设置的事件的对象(如下图所示的mouseout属性扩展):

Then in Chrome, you may right click the handler function and click "view function definition" to show you the exact spot where it is defined in your code.

然后，在Chrome中，您可以右键单击处理程序函数并单击“视图函数定义”，以显示在代码中定义它的确切位置。

59  

General case:

一般情况下:

• Hit F12 to open Dev Tools
• 按F12打开开发工具
• 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
• 与目标元素交互，如果它们开火，您将在调试器中获得一个断点。

Similarly, you can:

类似地,您可以:

• right click on the target element -> select "Inspect element"
• 右键单击目标元素——>选择“Inspect element”
• Scroll down on the right side of the dev frame, at the bottom is 'event listeners'.
• 在dev框架的右侧向下滚动，底部是“事件监听器”。
• 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)
• 展开该树，查看该元素上附加了哪些事件。不确定这是否适用于通过冒泡处理的事件(我猜不是)

11  

I'm adding this for posterity; There's an easier way that doesn't involve writing more JS. Using the amazing firebug addon for firefox,

我把这个加给后代;有一种更简单的方法不需要编写更多的JS。使用令人惊叹的firebug插件为firefox，

1. Right click on the element and select 'Inspect element with Firebug'
2. 右键单击元素并选择“使用Firebug检查元素”
3. In the sidebar panels (shown in the screenshot), navigate to the events tab using the tiny > arrow
4. 在工具条面板(如屏幕截图所示)中，使用小的>箭头导航到events选项卡
5. The events tab shows the events and corresponding functions for each event
6. events选项卡显示每个事件的事件和相应的函数。
7. The text next to it shows the function location
8. 它旁边的文本显示函数位置

6  

The jQuery Audit plugin plugin should let you do this through the normal Chrome Dev Tools. It's not perfect, but it should let you see the actual handler bound to the element/event and not just the generic jQuery handler.

jQuery审计插件插件应该允许您通过普通的Chrome开发工具进行审计。它并不完美，但它应该让您看到绑定到元素/事件的实际处理程序，而不仅仅是一般的jQuery处理程序。

2  

While this isn't exactly specific to jQuery selectors/objects, in FireFox Quantum 58.x, you can find event handlers on an element using the Dev tools:

虽然这并不是针对jQuery选择器/对象的，但是在FireFox Quantum 58中。您可以使用Dev工具在元素上找到事件处理程序:

1. Right-click the element
2. 右键单击元素
3. In the context menu, Click 'Inspect Element'
4. 在上下文菜单中，单击“查看元素”
5. If there is an 'ev' icon next to the element (yellow box), click on 'ev' icon
6. 如果在元素(黄色框)旁边有一个“ev”图标，点击“ev”图标。
7. Displays all events for that element and event handler
8. 显示该元素和事件处理程序的所有事件

1  

I used something like this if($._data($("a.wine-item-link")[0]).events == null) { ... do something, pretty much bind their event handlers again } to check if my element is bound to any event. It will still say undefined (null) if you have unattached all your event handlers from that element. That is the reason why I am evaluating this in an if expression.

我使用了这样的if($._data($(“a.wine-item-link”)[0]))。事件== null){…做点什么，再次绑定事件处理程序}来检查我的元素是否绑定到任何事件。如果您从该元素中删除了所有事件处理程序，它仍然会说未定义(null)。这就是我用if表达式求值的原因。

0  

When I pass a little complex DOM query to $._data like this: $._data($('#outerWrap .innerWrap ul li:last a'), 'events') it throws undefined in the browser console.

当我将一个复杂的DOM查询传递给$时。_data:美元。_data($('#outerWrap . innerwrap ul li:last a')， 'events')它在浏览器控制台中未定义地抛出。

So I had to use $._data on the parent div: $._data($('#outerWrap')[0], 'events') to see the events for the a tags. Here is a JSFiddle for the same: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

所以我必须用$。父div的数据:$._data($('#outerWrap')[0]， 'events')来查看标记的事件。这里有一个JSFiddle: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

0  

Note that events may be attached to the document itself rather than the element in question. In that case, you'll want to use:

注意，事件可以附加到文档本身，而不是相关的元素。在这种情况下，您需要使用:

$._data( $(document)[0], "events" );

And find the event with the correct selector:

用正确的选择器找到事件:

And then look at the handler > [[FunctionLocation]]

然后看看处理器> [[FunctionLocation]]