Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to find out which JavaScript events fired?

I have a select list:

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

When I select Closed the page reloads. In this case it shows closed tickets (instead of opened). It works fine when I do it manually.

The problem is that the page does not reload when I select Closed with Watir:

browser.select_list(:id => "filter").select "Closed"

That usually means that some JavaScript event is not fired. I can fire events with Watir:

browser.select_list(:id => "filter").fire_event "onclick"

but I need to know which event to fire.

Is there a way to find out which events are defined for an element?

like image 748
Željko Filipin Avatar asked Oct 10 '22 23:10

Željko Filipin


People also ask

How do I find out which event was 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. If the event will fire, then you will get a breakpoint in the debugger.

How do you check if an event has been triggered in JavaScript?

$('button'). click(function(event, wasTriggered) { if (wasTriggered) { alert('triggered in code'); } else { alert('triggered by mouse'); } }); $('button').

How do I see events in inspect element?

Right-click on the search icon button and choose “inspect” to open the Chrome developer tools. Once the dev tools are open, switch to the “Event Listeners” tab and you will see all the event listeners bound to the element. You can expand any event listener by clicking the right-pointing arrowhead.


1 Answers

Just thought I'd add that you can do this in Chrome as well:

Ctrl + Shift + I (Developer Tools) > Sources> Event Listener Breakpoints (on the right).

You can also view all events that have already been attached by simply right clicking on the element and then browsing its properties (the panel on the right).

For example:

  • Right click on the upvote button to the left
  • Select inspect element
  • Collapse the styles section (section on the far right - double chevron)
  • Expand the event listeners option
  • Now you can see the events bound to the upvote
  • Not sure if it's quite as powerful as the firebug option, but has been enough for most of my stuff.

    Another option that is a bit different but surprisingly awesome is Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

    It highlights all of the elements on a page that have been bound and has popovers showing the functions that are called. Pretty nifty for a bookmark! There's a Chrome plugin as well if that's more your thing - not sure about other browsers.

    AnonymousAndrew has also pointed out monitorEvents(window); here

    like image 168
    Chris Owens Avatar answered Oct 13 '22 13:10

    Chris Owens