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

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?

To be clear, you have a DOM object and you want to know what it does onclick? Have you tried `someObject.onclick` or `someObject.getAttribute("onclick")`? You cannot know what file it came from, since JS code knows nothing about which file it came from. — apsillers, May 17 '12 at 15:54
possible duplicate of [How to check if any JavaScript event listeners/handlers attached to an element/document?](http://stackoverflow.com/questions/2382994/how-to-check-if-any-javascript-event-listeners-handlers-attached-to-an-element-d) — Diodeus - James MacFarlane, May 17 '12 at 15:55
@Diodeus: that question is different - it's about using jQuery to get the bound events, while the OP is looking for a browser devtool instead. — Dan Dascalescu, Oct 08 '14 at 20:12
possible duplicate of [Using Chrome, how to find who's binded to an event?](http://stackoverflow.com/questions/7338193/using-chrome-how-to-find-whos-binded-to-an-event) — Dan Dascalescu, Oct 08 '14 at 20:12

score 72 · Answer 1 · answered May 17 '12 at 16:00

72

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.

answered May 17 '12 at 16:00

benekastah

5,651
1
35
50

2

I never knew this existed in chrome. This is awesome and answers the question for me. – circlecube Feb 06 '13 at 14:48
1

Thank you for informing us about this tool, but in what this method is useful if it is going to point me lines of code from the jQuery library. How to know which part of MY code is running. – Adib Aroui May 18 '15 at 15:43
1

@whitelettersandblankspaces The only way I know of currently is to step through jQuery's code until you get to yours. – benekastah May 30 '15 at 23:38
how can you tell what event listener type has called the callback? – SuperUberDuper May 24 '16 at 10:52
back in the days how noob the developers are can't believe and developer tools too – Ace Dec 26 '19 at 10:01

Adil · Accepted Answer · 2012-05-17T16:02:12.280

5

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

edited May 17 '12 at 16:02

answered May 17 '12 at 15:55

Adil

146,340
25
209
204

6

I don't see a jQuery tag on the question anywhere. – Elliot Bonneville May 17 '12 at 15:56
1

Modified my answer I hope its fine now – Adil May 17 '12 at 16:02
1

This will require that he pepper his code with alerts(). Terrible way to debug javascript. – Gjohn Oct 05 '15 at 22:19
@Gjohn, the alert is just to show the output, one should not use it if not required. – Adil Oct 06 '15 at 04:10

score 1 · Answer 3 · answered May 17 '12 at 15:55

1

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.

answered May 17 '12 at 15:55

Widor

13,003
7
42
64

score 1 · Answer 4 · answered May 17 '12 at 15:55

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.

score 1 · Answer 5 · answered May 17 '12 at 15:56

1

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

answered May 17 '12 at 15:56

Gabe

49,577
28
142
181

score 0 · Answer 6 · answered Apr 09 '18 at 11:45

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

score 0 · Answer 7 · answered Mar 17 '22 at 10:48

Use the Chrome's Developer Tools (as suggested by benekastah), but then go on:

Event Listeners -> click.

Here you will find the list of js files running on your page on click events.

Compared to the solution given by benekastah, in this case, you can immediately see the list, without spending several time in debugging.

score 0 · Answer 8 · answered Dec 10 '22 at 06:07

0

In javascript toString of a function returns its insdie code as a string:

var button = document.getElementById("button");

button.onclick.toString(); // function handleClick { alert(1); }

answered Dec 10 '22 at 06:07

Amir Fo

5,163
1
43
51

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

8 Answers8

Linked