How to Find Out Which JavaScript Events Fired

How to find out which JavaScript events fired?

Looks like Firebug (Firefox add-on) has the answer:

• open Firebug
• right click the element in HTML tab
• click Log Events
• enable Console tab
• click Persist in Console tab (otherwise Console tab will clear after the page is reloaded)
• select Closed (manually)

• there will be something like this in Console tab:

  ...
  mousemove clientX=1097, clientY=292
  popupshowing
  mousedown clientX=1097, clientY=292
  focus
  mouseup clientX=1097, clientY=292
  click clientX=1097, clientY=292
  mousemove clientX=1096, clientY=293
  ...
  

Source: Firebug Tip: Log Events

How do I view events fired on an element in Chrome DevTools?

• Hit F12 to open Dev Tools
• Click the Sources tab
• On right-hand side, scroll down to "Event Listener Breakpoints", and expand tree
• Click on the events you want to listen for.
• Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can right click on the target element -> select "inspect element" Scroll down on the right side of the dev frame, at the bottom is 'event listeners'. Expand the tree to see what events are attached to the element. Not sure if this works for events that are handled through bubbling (I'm guessing not)

Find out which Javascript function is fired on click

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

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.

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

How do you log all events fired by an element in jQuery?

$(element).on("click mousedown mouseup focus blur keydown change",function(e){
     console.log(e);
});

That will get you a lot (but not all) of the information on if an event is fired... other than manually coding it like this, I can't think of any other way to do that.

How to find which Javascript fires or handles an event?

This behaviour might be caused by several different reasons. One of them that is often overlooked is links like <a href="#">Some JavaScript Handler</a>.

When the JavaScript handler does not properly handle the event (e.g. by calling event.preventDefault(), the HTML link will be followed in addition to the JavaScript handler. Most browsers handle a link to an empty anchor tag # by going to the top of the page. This can easily be avoided when using an empty href attribute like <a href>Some JavaScript Handler</a>.

How to check if an event was fired or not?

Regarding Chrome, checkout the monitorEvents() via the command line API.

• Open the console via Menu > Tools > JavaScript Console.
• Enter monitorEvents(window);

• View the console flooded with events

  ...
  mousemove MouseEvent {dataTransfer: ...}
  mouseout MouseEvent {dataTransfer: ...}
  mouseover MouseEvent {dataTransfer: ...}
  change Event {clipboardData: ...}
  ...
  

There are other examples in the documentation. I'm guessing this feature was added after the previous answer.

List of events that are getting fired in the DOM

If you're on chrome, you can also install an extension called "Visual Event" works pretty good to me, and it list all DOM events.

Link to chrome web store

---

Related Topics