检查元素以调查jQuery事件绑定

使用 Firebug , FireQuery 和 this fiddle

点击Cmd+Shift+C(检查元素)并点击 按钮 揭示了这一点:

点击事件 Object {click= } 揭示这一点(在展开一些信息之后)

然后点击 function() 揭示了这一点:

你要找的代码应该是哪个,对吧?

值得注意的是,Firebug并不总能找到某个源代码的确切行。我已经让这个方法完全失败了!另一种方法是使用命名函数表达式。将代码更改为:

$('#bigButton').click(function showMyLlama(){
  $('img#theLlama').show();
})

现在在检查 events 对象:

这比 函数() 很明显,这个驯鹿给我们展示了一只美洲驼。你现在也可以搜索代码的函数名并找到它!

Chrome ,它内置的web检查器和 this fiddle :

点击Cmd+Shift+C(检查元素)并点击按钮,显示如下:

单击elements inspector中的按钮,然后按Escape打开JS控制台:

$0 引用“元素”面板中的选定元素。

输入 $._data( $0 ) 将提供包含事件的jQuery(内部)数据对象,就像我们的Firebug示例一样,遗憾的是,Chrome不允许我们单击该函数,但它将让我们看到源代码:

<Broken Screenshot link>

.live() 事件:

实时事件存储在 $._data( document, "events" ) 并包含 origHandler 指向函数:

<Broken screenshot link>

http://firequery.binaryage.com/

是个萤火虫插件 明确地

FireQuery是最方便的,但是如果需要手动执行,可以使用 $(element).data('events').click[0].handler (当然,如果有多个单击处理程序,则不一定为0)。在代码中找到该函数取决于您最喜欢的调试器。(使用命名函数有帮助。Firebug有时可以定位匿名函数,但通常不能。但是,如果您用鼠标悬停在函数的主体上,它将显示函数的主体。)

更新 以下是使用FireQuery显示数据的方式:

慰问:

eventbug将显示元素的所有事件处理程序, http://getfirebug.com/releases/eventbug