How can I find what onChange function an Element has?

Question

I have a page which loads a lot of JavaScript files. Somewhere in the files, an onchange handler is added to an inputfield A.

When a value is added into inputfield A, inputfield B is automatically filled in with another value (depending on the value of A).

The sheer number of files and the names of the inputfields ('code', 'key') make it hard to use grep to find where the onchange is defined.

I've tried using

but I can't seem to find out how to get them to show me where I can find the onchange function that gets called.

Anyone got an idea?

Do you know that something is assigning to the 'onchange' property: it may be using addEventListener or equivalent (which is a much more flexible interface for setting event handlers, but bypasses the "onxxx" properties) — Colin Fine, May 18 '11 at 13:17
That is possible too - can you include how to find these too in your answer? :) — Konerak, May 18 '11 at 13:43

score 1 · Answer 1 · answered May 18 '11 at 13:31

1

Chrome has build in developer tools that allow you to inspect an element and see any event listeners attached to it.

answered May 18 '11 at 13:31

herostwist

The "EventListeners" tab indeed shows a changelistener, a focus and a keydown, but it shows an "anonymous function" with no hint at where to find the actual function. – Konerak May 18 '11 at 13:40
Try going to the script tab and adding an 'event listener breakpoint' for the event your looking for, triggering that event, and then use the 'step into next function' button to drill down to find your anonymous function. you may have to click that button a lot. – herostwist May 18 '11 at 14:45
I'm sorry, I can't find how to add that "Event Listener Breakpoint". I don't know which function it is? – Konerak May 18 '11 at 14:53

score 1 · Accepted Answer · answered May 18 '11 at 13:44

1

you can see the jquery expression in firebug DOM inspector using firequery in firefox https://addons.mozilla.org/en-us/firefox/addon/firequery/

answered May 18 '11 at 13:44

Rajani Karuturi

+1 This indeed shows me the two functions that get called! I'd still like to know **where** they get added, but atleast now I can see what they are doing. Thanks! – Konerak May 18 '11 at 14:11

score 0 · Answer 3 · edited Jan 03 '20 at 16:02

0

I had the same issue and I used Google Chrome's dev tool and it helped. Follow the steps below:

edited Jan 03 '20 at 16:02

iamdanchiv

answered Jan 03 '20 at 15:34

Hewan Galife

score 0 · Answer 4 · answered May 18 '11 at 13:12

0

You can use Firebug to set a breakpoint when a particular HTML element has an attribute change:

You could try selecting the second element you've described (that gets filled in) and see if that works for you.

answered May 18 '11 at 13:12

James

Nice thinking, but alas: the attribute never changes once the page is loaded, and your link shows "Breakpoints on Event Handlers: This feature not yet implemented". – Konerak May 18 '11 at 13:41

score 0 · Answer 5 · answered May 18 '11 at 13:18

0

Visual Events allows you to inspect the bound events without editing your code:

answered May 18 '11 at 13:18

George Cummins

5 Answers5