Javascript 我可以使用 jQuery 找到绑定在元素上的事件吗？

Can I find events bound on an element with jQuery?

提问by Praveen Prasad

I bind two event handlers on this link:

我在此链接上绑定了两个事件处理程序：

<a href='#' id='elm'>Show Alert</a>

JavaScript:

JavaScript：

$(function()
{
  $('#elm').click(_f);
  $('#elm').mouseover(_m);
});

function _f(){alert('clicked');}
function _m(){alert('mouse over');}

Is there any way to get a list of all events bound on an element, in this case on element with id="elm"?

有没有办法获得绑定在一个元素上的所有事件的列表，在这种情况下是在元素上id="elm"？

回答by Sampson

In modern versions of jQuery, you would use the $._datamethod 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 $._datawill be an object that contains both of the events we set (pictured below with the mouseoutproperty 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 中，您可以右键单击处理程序函数并单击“查看函数定义”以显示它在代码中定义的确切位置。

回答by Vali Shah

General case:

一般情况：

• Hit F12to open Dev Tools
• Click the Sourcestab
• 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

• 点击F12打开开发工具
• 单击Sources选项卡
• 在右侧，向下滚动到Event Listener Breakpoints，然后展开树
• 单击要收听的事件。
• 与目标元素交互，如果它们触发，您将在调试器中获得一个断点

Similarly, you can:

同样，您可以：

• right click on the target element-> select "Inspect element"
• Scroll down on the right side of the dev frame, at the bottom is 'event listeners'.
• 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)

• 右键单击目标元素-> 选择“ Inspect element”
• 在开发框架的右侧向下滚动，底部是“ event listeners”。
• 展开树以查看哪些事件附加到元素。不确定这是否适用于通过冒泡处理的事件（我猜不是）

回答by kakoma

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。使用Firefox 惊人的 firebug 插件，

1. Right click on the element and select 'Inspect element with Firebug'
2. In the sidebar panels (shown in the screenshot), navigate to the events tab using the tiny > arrow
3. The events tab shows the events and corresponding functions for each event
4. The text next to it shows the function location

1. 右键单击该元素并选择“Inspect element with Firebug”
2. 在侧边栏面板（如屏幕截图所示）中，使用小 > 箭头导航到事件选项卡
3. 事件选项卡显示每个事件的事件和相应的功能
4. 旁边的文字显示了函数位置

回答by ScottyG

You can now simply get a list of event listeners bound to an object by using the javascript function getEventListeners().

现在，您可以使用 javascript 函数 getEventListeners() 简单地获取绑定到对象的事件侦听器列表。

For example type the following in the dev tools console:

例如，在开发工具控制台中键入以下内容：

// Get all event listners bound to the document object
getEventListeners(document);

回答by JohnK

The jQuery Audit pluginplugin 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 处理程序。

回答by Chris22

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.x 中，您可以使用开发工具在元素上找到事件处理程序：

1. Right-click the element
2. In the context menu, Click 'Inspect Element'
3. If there is an 'ev' icon next to the element (yellow box), click on 'ev' icon
4. Displays all events for that element and event handler

1. 右键单击元素
2. 在上下文菜单中，单击“检查元素”
3. 如果元素旁边有一个“ev”图标（黄色框），点击“ev”图标
4. 显示该元素和事件处理程序的所有事件

回答by Pikamander2

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]]

回答by Adrian Liew

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]).events == null) { ... 做一些事情，几乎再次绑定他们的事件处理程序 } 来检查如果我的元素绑定到任何事件。如果您已从该元素取消附加所有事件处理程序，它仍会显示未定义 (null)。这就是我在 if 表达式中评估它的原因。

回答by giri-jeedigunta

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')它在浏览器控制台中抛出 undefined 。

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$._data($('#outerWrap')[0], 'events')来查看 a 标签的事件。这是相同的 JSFiddle：http: //jsfiddle.net/giri_jeedigunta/MLcpT/4/