如何找出对象的onclick事件调用的javascript函数？

Question

How do I find out what javascript function is being called by an object's onclick event? Even better, can I then find out which included .js file that function is in?

Answer 1

I use Chrome's Developer Tools for this:

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.

Answer 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'))​;

Answer 3

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.

Answer 4

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);

Answer 5

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.

Answer 6

I have a different approach. I overload onclick function and add my debugger before the real function.

This is the element

<div id="div1">​

Write this JavaScript to developer console

var clickFn = $("#div1").click; 

$("#div1").click(function(){ 
    debugger; 
    clickFn(); 
});