CODEWITHSUNDEEP
javascriptjquerygoogle-chromedebugginggoogle-chrome-devtools
UpQuark
UpQuark

Reputation: 801

How do I find where an event handler is attached in a large web application?

I'm trying to troubleshoot an issue in which a jQuery listener is attaching to a DOM element on one page but not another in a complicated web application that I am not intimately familiar with.

The issue: There is a submenu that is supposed to render on hover over a main menu item. There are two versions of a page (Legacy and New), which should ostensibly be running very similar code (page contents are slightly different but UI code should ostensibly be the same), both of which have this menu.

In the Legacy version, the menu functionality works fine, but in the New version, this submenu does not render on hover. When I look in the Chrome dev-tools under "event listeners" for the relevant DOM elements, I see that while the Legacy page has corresponding handlers attached for mouseover and mouseout, the New page does not.

My process to hopefully solve this problem is to find what is attaching the event listeners in the Legacy version, and then debug through to investigate why these are not attaching in the New version. Here is where I'm running into trouble.

Here is what I see for the event:

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

I am unsure how I can use this information to find the actual code that is attaching this handler, which I would need to look at to establish why this handler is not being attached in the New page version. The use of jQuery-min somewhat complicates it, and I cannot swap out the versions.

Is there a method by which, using this information, I can establish where this handler comes from?

Thanks!

Upvotes: 0

Views: 209

Answers (1)

Sunny Singh
Sunny Singh

Reputation: 86

for binding event you need to select elements.

You can use the selector - li.submenu or just .submenu, and search for these two strings in all the JavaScript files. There should be some place where these selectors are used with jQuery's on or bind or other event binding methods like addEventListener

Upvotes: 1

Related Questions