如何在大型 Web 应用程序中找到事件处理程序的附加位置？答案

【问题标题】：How do I find where an event handler is attached in a large web application?如何在大型 Web 应用程序中找到事件处理程序的附加位置？
【发布时间】：2014-11-17 20:41:05
【问题描述】：

我正在尝试解决一个问题，即 jQuery 侦听器附加到一个页面上的 DOM 元素，而不是附加到我并不熟悉的复杂 Web 应用程序中的另一个。

问题： 有一个子菜单应该在悬停在主菜单项上时呈现。页面有两个版本（旧版和新版），表面上应该运行非常相似的代码（页面内容略有不同，但 UI 代码表面上应该相同），两者都有这个菜单。

在旧版本中，菜单功能可以正常工作，但在新版本中，此子菜单不会在悬停时呈现。当我在“事件侦听器”下的 Chrome 开发工具中查看相关 DOM 元素时，我看到虽然旧页面为 mouseover 和 mouseout 附加了相应的处理程序，但新页面没有。

我希望解决这个问题的过程是找到在旧版本中附加事件侦听器的原因，然后通过调试来调查为什么新版本中没有附加这些事件侦听器。这是我遇到麻烦的地方。

这是我看到的事件：

mouseout:
     li.submenu:

handler: function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b}
arguments: null
caller: null
elem: li.submenu
length: 1
name: ""
prototype: Object
constructor: function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b}
__proto__: Object
__proto__: function Empty() {}
<function scope>
isAttribute: false
lineNumber: 3
listenerBody: "function (a){return typeof f!="undefined"&&(!a||f.event.triggered!==a.type)?f.event.dispatch.apply(i.elem,arguments):b}"
node: li.submenu
sourceName: "https://myServer.com/jquery/1.7.1/jquery-min.js"
type: "mouseout"
useCapture: false

我不确定如何使用此信息来查找附加此处理程序的实际代码，我需要查看这些代码以确定为什么未在新页面版本中附加此处理程序。使用 jQuery-min 有点复杂，我不能换掉版本。

是否有一种方法可以使用此信息确定此处理程序的来源？

谢谢！

【问题讨论】：

标签： javascript jquery google-chrome debugging google-chrome-devtools

【解决方案1】：

对于绑定事件，您需要选择元素。

您可以使用选择器 - li.submenu 或只是 .submenu，并在所有 JavaScript 文件中搜索这两个字符串。这些选择器应该在某些地方与 jQuery 的 on 或 bind 或其他事件绑定方法（如 addEventListener）一起使用

【讨论】：