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

• Opera Dragonfly
• Firefox Firebug
• Google Chrome Developer Tools

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?

Answer 1

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

Google chrome developer tools really are amazing. http://code.google.com/chrome/devtools/docs/elements.html

Answer 2

您可以在 firefox https://addons.mozilla.org/en-us/firefox/addon/firequery/ 中使用 firequery 在 firebug DOM 检查器中看到 jquery 表达式

Answer 3

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

1. Select the event listener breakpoint

2. Select control checkbox

3. Select onChange this will pause on the onChange function in your code

Answer 4

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

http://getfirebug.com/doc/breakpoints/demo.html#html

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

Answer 5

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

http://www.sprymedia.co.uk/article/Visual+Event