How can I find what onChange function an Element has?

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?

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

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

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.

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

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

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