How to find out which JavaScript events fired

Question

I have a select list    lt select id  filter  gt     lt option value  Open  selected  selected  gt Open lt  option gt     lt option value  Closed  gt Closed lt  option gt   lt  select gt    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   gt   filter   select  Closed    That usually means that some JavaScript event is not fired  I can fire events with Watir   browser select list  id   gt   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

User · Accepted Answer

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

User · Answer

Regarding Chrome  checkout the monitorEvents   via the command line API   Open the console via Menu  gt  Tools  gt  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

User · Answer

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

User · Answer

You can use getEventListeners in your Google Chrome developer console      getEventListeners object  returns the event listeners registered on   the specified object    getEventListeners document querySelector  option value Closed

[javascript] How to find out which JavaScript events fired?

Examples related to javascript

Examples related to events

Examples related to watir

Examples related to dom-events

Examples related to browser-automation