0

I have a large project. With dozens of JS files. An element on my page has a click event attached to it. I want to edit this click event, but first I need to locate its' file & line. How can I do that, without knowing the function name or file name before hand? Is there a way to watch the element in firebug and record the function being executed?

Backstory:

The element has an .open class being added when it is clicked, and removed when the user clicks on anything else. I want to have that .open class added on mouseover, and removed on mouseout. I want to use the same function being called in the click event, but first I need to find it.

Thanks.

Saahir Foux
  • 654
  • 4
  • 12
  • 27
  • 1
    possible duplicate of [How to find event listeners on a DOM node?](http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node) – Lbatson Oct 06 '14 at 21:57
  • Will read through this question to see if it provides the answer I seek. – Saahir Foux Oct 06 '14 at 22:16

2 Answers2

2

If you are using jquery to add the event you can find the handler of the event using this code in firebug's console:

jQuery._data($(".someHTMLelement")[0], "events")

You will find the location of the handler under the "handler" property, just click on the function to jump to the corresponding line in your code.

If you are not using jquery but a native addEventListener you can use this:

getEventListeners($(".rs-btn")[1])

The function will be under the property "listener"

kevinius
  • 4,232
  • 7
  • 48
  • 79
  • Thanks, Kevinius. This code, + what has been posted in the question intothev01d referenced has been a great help. – Saahir Foux Oct 08 '14 at 21:23
0

If you neither know the file name nor the function name, you can make use of Firebug's HTML panel's Break On Mutate features.

This can be enabled for all elements using the toolbar button (Break On Mutate button) or for a specific element and a specific action via the context menu.

While that option is enabled, trigger the JavaScript that causes the changes to the element. This will then stop the script execution at the line where the change happens.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132