使用Chrome，如何find事件绑定到哪些元素？

假设我在我的页面上有一个链接： 

<a href="#" id="foo">Click Here</a>

我什么都不知道，但是当我点击这个链接时，会显示一个警告（“bar”）。 所以我知道在某个地方，一些代码被绑定到#foo。

我怎样才能find绑定警报（“酒吧”）的点击事件的代码？ 我正在寻找与Chrome的解决scheme。

Ps：这个例子是虚构的，所以我没有寻找像“使用XXXXXX和search整个项目”alert（\“bar \”）“的解决scheme，我想要一个真正的debugging/跟踪解决scheme。

使用Chrome 15.0.865.0 dev 。 元素面板上有一个“事件监听器”部分：

在这里输入图像描述

还有脚本面板上的“事件监听器断点”。 使用鼠标 – >单击断点，然后“步入下一个函数调用”，同时留意调用堆栈以查看哪些用户级函数处理事件。 理想情况下，您可以用未定义的jQueryreplacejQuery的缩小版本，这样您就不必一直步入 ，并尽可能地使用step 。

在这里输入图像描述

您也可以使用Chrome的检查器以其他方式查找附加事件，如下所示：

  1. 右键单击要检查的元素，或者在“元素”窗格中find它。
  2. 然后在“事件监听器”选项卡/窗格中，展开事件（例如“单击”）
  3. 展开各个子节点以find所需的子节点，然后查找“处理程序”子节点的位置。
  4. 右键单击“function”一词，然后单击“显示function定义”

这将带您到定义处理程序的位置，如下图所示，Paul Irish在这里解释： https ： //groups.google.com/forum/#!topic/google- chrome-developer-tools/ NTcIS15uigA

“显示功能定义”

尝试jQuery审核扩展（ https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg ），安装后请按照下列步骤操作：

  1. 检查元素
  2. 在新的“ jQuery审计 ”选项卡上展开事件属性
  3. select您需要的活动
  4. 从处理程序属性中，右键单击function，然后select“ 显示function定义 ”
  5. 您现在将看到事件绑定代码
  6. 点击“ 漂亮打印 ”button，可以更清晰地查看代码

编辑 ：代替我自己的答案，这是非常优秀的： 如何debugging与Firebug的JavaScript / jQuery事件绑定（或类似的工具）

Google Chromes开发人员工具在脚本部分内置了searchfunction

如果你不熟悉这个工具：（以防万一）

  • 右键单击页面上的任意位置（以铬显示）
  • 点击“检查元素”
  • 点击“脚本”标签
  • search栏在右上angular

快速search#ID应该带你到绑定函数最终。

例如：search#foo会带你到 

 $('#foo').click(function(){ alert('bar'); })

在这里输入图像描述

findEventHandlers是一个jQuery插件，原始代码在这里： https ://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js

脚步

  1. 将原始代码直接粘贴到Chrome的控制台中（注意：必须已经加载jquery）

  2. 使用下面的函数调用： findEventHandlers(eventType, selector);
    find相应的select器指定元素的eventType处理程序。

例如 ： 

 findEventHandlers("click", "#clickThis");

然后，如果有的话，可用的事件处理程序将显示下图，您需要展开以查找处理程序，右键单击该函数并selectshow function definition

请参阅： https ： //blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/

对于Chrome版本52.0.2743.116：

  1. 在Chrome的开发者工具中，点击“ Ctrl + Shift + F ”打开“search”面板。

  2. input您正在尝试查找的元素的名称。

绑定元素的结果应显示在面板中，并声明它们所在的文件。

Interesting Posts