Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Find out which Javascript function is fired on click

Is there a way to find out which Javascript function is fired by click on a certain button?

Let me explain ...
I have a web page with a large js script (not made ​​by me), I've to detect which function is triggered by a specific button, I need to find the function triggered by this button.

like image 470
Dee Avatar asked Jun 19 '12 09:06

Dee


People also ask

How do you find out which JavaScript Events fired?

Open Google Chrome and press F12 to open Dev Tools. Go to Event Listener Breakpoints, on the right: Click on the events and interact with the target element.

How do I know which JavaScript is calling?

This is available in all major browsers in the developer tools (usually press F12 to open). In Chrome, for example, right click on the element, inspect element. Then expand the 'Event Listeners' tab on the righthand side, find 'click' and expand that.


3 Answers

Use Chrome's Web Inspector to inspect the element and check out the Event Listeners panel.

Web Inspector Example

If the code attaching the event is in a library (for example, by Zepto in my example), set a breakpoint on the line and examine the call stack to see where it originated in your code.

Call stack example

As you can see, the event has originated in my code and now I know the filename and line number.

like image 186
alex Avatar answered Oct 03 '22 04:10

alex


Inside your functions, you can put arguments.callee to know about it. Notice that this is deprecated but should tell you what you are looking for.

alert(arguments.callee);
like image 27
Sarfraz Avatar answered Oct 03 '22 04:10

Sarfraz


In Google Chrome, open your web page of interest.

Right-click on the element(i.e a button) you want to inspect. In the 'context menu' that appears, click 'Inspect'. A 'Developer tools' window will appear.

  1. Click the 'Elements' tab.
  2. Click the HTML element you wish to inspect if not already selected.
  3. Click on the 'Event Listeners' tab. A full list of listeners will show up.
  4. Select the event listener you're interested in. i.e 'click'. A call stack will show up.
  5. Click on the last item in the call stack. This will finally redirect you to that actual function that gets executed when the event fires.

Google chrome - Inspect option

Google chrome - Developer tools window

like image 36
steven7mwesigwa Avatar answered Oct 03 '22 02:10

steven7mwesigwa