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

Question

我正在尝试解决以下问题:在我不太熟悉的复杂 Web 应用程序中，jQuery 监听器附加到一个页面上的 DOM 元素，但没有附加到另一个页面上的 DOM 元素。

问题:有一个子菜单应该在将鼠标悬停在主菜单项上时呈现。页面有两个版本(旧版和新版)，表面上应该运行非常相似的代码(页面内容略有不同，但 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 的使用有点使其复杂化，而且我无法更换版本。

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

谢谢!

Answer 1

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

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

)一起使用