How to find which line adds a certain js event handler? [duplicate]

Question

A certain HTML element when clicked does something. I cannot find which line adds that click event. Is there any tool to help?

Chrome dev tools > Elements > (select that element, see right panel) > Event Listeners > click，it lists a few js file with line numbers，but they are js plugins. What I need is which line decides that element to use those plugins.

I also tried to search .click( but 1) there are too many other elements assigned with click events 2) the line in question may be written in other syntax, eg: .on('click'

I am not sure if I understand this correctly. Do you mean to add a debugger line to the existing click event? But the question is how to find that existing click event line. — Ksthawma
– Ksthawma, Commented May 11, 2014 at 7:12
No, I can find the DOM node, but where in js is the event handler added? — Ksthawma
– Ksthawma, Commented May 11, 2014 at 8:09
[Edited] Sorry you are right. But that visual event does not find all events. I think it depends on how the event is written. — Ksthawma
– Ksthawma, Commented May 11, 2014 at 8:22
For example, link There are mouse over, mouse out events attached to 'Narrow By' that visual event fails to find. — Ksthawma
– Ksthawma, Commented May 11, 2014 at 8:27

Slash · Accepted Answer · 2014-05-12 19:21:10Z

1

Override the EventTarget addEventListener prototype like this, then add a breakpoint to the console.log and use chrome dev console, you'll be able to see the Stack trace and find out where it was added.

Just be sure to disable it after you have found the source

Add this before adding any events.

EventTarget.prototype.addEventListener = function(type,listener,useCapture) {
if (this.id === 'id of the element you are tracking')
    console.log('breakpoint!');
};

Sample usage: enter image description here

edited May 12, 2014 at 19:21

answered May 12, 2014 at 15:55

Slash

5062 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to find which line adds a certain js event handler? [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related