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

IT技术 javascript jquery jquery-events
2021-01-10 03:08:36

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

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

JavaScript:

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

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

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

6个回答

在现代版本的 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" );

来自的结果$._data将是一个包含我们设置的两个事件的对象(如下图所示,mouseout属性已展开):

$._ 的控制台输出

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

@jammypeach 我正在尝试您的解决方案,但仍然为选择器返回 undefined 。我用了 $('#elem').bind('click', function() {}); 如果那会有所作为。
2021-03-13 03:08:36
@marcus ahhh,oop,我错过了一些东西,抱歉:) $._data(element[0], ‘events’);
2021-03-15 03:08:36
$._data()由 JQuery 内部使用。$.data()是用户的公共方法。并且$.data(element, 'events')工作正常。
2021-04-04 03:08:36
这些天必须使用: $._data( $('#foo')[0] ).events
2021-04-06 03:08:36
这仅适用于通过 jQuery 助手绑定的元素。
2021-04-10 03:08:36

一般情况:

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

同样,您可以:

  • 右键单击目标元素-> 选择“ Inspect element
  • 在开发框架的右侧向下滚动,底部是“ event listeners”。
  • 展开树以查看哪些事件附加到元素。不确定这是否适用于通过冒泡处理的事件(我猜不是)
@dead 嗯...这个问题特指jQuery并在示例附件中使用jQuery - 答案应该只在jQuery(?)的上下文中有效
2021-03-25 03:08:36
我同意这是首选方法并且是通用解决方案,而不是依赖于 jQuery,后者可能可用也可能不可用。
2021-04-05 03:08:36
理解其他上下文中的答案也很有帮助。仅仅因为有人问了一个特定的问题并不意味着他们将收到的有限答案是最好的答案。尤其是使用 jQuery,人们倾向于将其作为拐杖来依赖。了解底层架构很重要。这个答案表明 jQuery 甚至不是必需的。问题和示例太模糊,无法了解用法,因此,可以解释什么可以被视为有效答案。
2021-04-10 03:08:36

我为后代添加这个;有一种更简单的方法,不需要编写更多的 JS。使用Firefox 惊人的萤火虫插件

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

在此处输入图片说明

这也可在 IE 开发工具中使用。
2021-04-08 03:08:36

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

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

// Get all event listners bound to the document object
getEventListeners(document);
我认为这不是本机函数,需要以下脚本/依赖项:github.com/colxi/getEventListeners这应该添加到答案中,否则会产生误导。但是感谢你让我使用那个“插件”;看起来不错。:)
2021-04-06 03:08:36

jQuery的审计插件插件应该让你通过正常的Chrome浏览器开发工具做到这一点。它并不完美,但它应该让您看到绑定到元素/事件的实际处理程序,而不仅仅是通用的 jQuery 处理程序。