How to find out which JavaScript events fired? - Stack Overflow

admin管理员组

文章数量:1131654

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?

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?

• javascript
• events
• watir
• dom-events
• browser-automation

Share Improve this question Follow edited Aug 27, 2019 at 21:18 Brian Tompsett - 汤莱恩 5,8757272 gold badges6161 silver badges133133 bronze badges asked Sep 24, 2010 at 13:27 Željko FilipinŽeljko Filipin 57.3k2828 gold badges9797 silver badges127127 bronze badges 2

• 1 This question lists more tools: stackoverflow.com/questions/570960/… – Željko Filipin Commented Sep 24, 2010 at 14:11
• 4 Visual Event, sprymedia.co.uk/article/Visual+Event . I am sure that that will help half of the people landing on this stackoverflow page :) – Cedric Commented Jul 25, 2012 at 1:40

Add a comment  | 

5 Answers 5

Sorted by: Reset to default 189

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

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

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.

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

@Himaas -- Firebug has been replaced in favor of Firefox Developer Edition. If you go ahead and install it, you can log events by opening the dev tools (Right Click > Inspect), then select Debugger, and then toward the bottom of the page you should see "Event Listener Breakpoints" with an unchecked checkbox called "Log". Check that checkbox. Now all you have to do is select the events you want logged in the list presented under "Event Listener Breakpoints". From there you will see the selected events logged to the console.

Here is an image to help illustrate:

本文标签： How to find out which JavaScript events firedStack Overflow