How do I find out what javascript function is being called by an object's onclick event?

Solution 1:

I use Chrome's Developer Tools for this:

Event Listener Breakpoints in Google Chrome's developer tools

Check the click box, and then click on the element on the page you want to find the handler for. If you are using jQuery (or similar library), you may have to step through their code before you get to yours.

Solution 2:

You can do like this

With Javascript Demo on JsFiddle

div1 = document.getElementById('div1');

alert(div1.getAttribute("onclick"));

With jQuery Demo on JsFiddle

<div id="div1" onclick="myfun();" >

alert($('#div1').attr('onclick'));

Solution 3:

I do this using this Visual Event script which neatly highlights which events are subscribed by which functions on which elements.

To find the souce of the code, simply use FireBug or similar browser developer tools to search the function name.

Solution 4:

You wouldn't be able to find out the file the onclick event is called from but myObject.onclick will give you the function that's being called. And no, you don't need jQuery for this.

As far as getting the name of the function, that's a little more complicated. You could try something like this, perhaps:

var myFunc = myObject.onclick, myFuncName = "";

for(prop in window) {
    if(window.hasOwnProperty(prop) && window[prop] === myFunc) {
        myFuncName = prop; // myFuncName is now the name of the function. This only works if you didn't assign an anonymous function to the click handler.
        break;
    }
}

But honestly, I think that's a little overkill.

Solution 5:

That depends on how the event is attached.

If you're binding to onclick without something like jQuery you could do this:

var obj = document.getElementById('elementId');
console.log(obj.onclick);