Come scoprire quali eventi JavaScript sono stati attivati?

Ho un elenco di selezione:

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

Quando seleziono Closedla pagina si ricarica. In questo caso mostra i biglietti chiusi (anziché aperti). Funziona bene quando lo faccio manualmente.

Il problema è che la pagina non si ricarica quando seleziono Closedcon Watir :

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

Di solito ciò significa che alcuni eventi JavaScript non vengono attivati. Posso attivare eventi con Watir:

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

ma ho bisogno di sapere quale evento attivare.

C'è un modo per scoprire quali eventi sono definiti per un elemento?

Ho solo pensato di aggiungere che puoi farlo anche in Chrome:

Ctrl+ Shift+ I(Strumenti per sviluppatori)> Sorgenti> Punti di interruzione del listener di eventi (a destra).

È inoltre possibile visualizzare tutti gli eventi che sono già stati allegati semplicemente facendo clic con il pulsante destro del mouse sull'elemento e quindi sfogliandone le proprietà (il pannello a destra).

Per esempio:

Non sono sicuro che sia potente quanto l'opzione firebug, ma è stato sufficiente per la maggior parte delle mie cose.

Un'altra opzione un po 'diversa ma sorprendentemente fantastica è Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

Evidenzia tutti gli elementi di una pagina che sono stati associati e dispone di popover che mostrano le funzioni chiamate. Abbastanza elegante per un segnalibro! C'è anche un plug-in di Chrome se questo è più la tua passione, non sono sicuro degli altri browser.

AnonymousAndrew ha anche sottolineato quimonitorEvents(window);

Sembra che Firebug (componente aggiuntivo di Firefox) abbia la risposta:

• apri Firebug
• fare clic con il pulsante destro del mouse sull'elemento nella scheda HTML
• clic Log Events
• abilitare la scheda Console
• fare clic su Persistenza nella scheda Console (altrimenti la scheda Console verrà cancellata dopo che la pagina è stata ricaricata)
• seleziona Closed(manualmente)

• ci sarà qualcosa di simile nella scheda Console:

  ...
  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
  ...

Fonte: Suggerimento Firebug: log eventi

Per quanto riguarda Chrome, controlla monitorEvents () tramite l'API della riga di comando.

• Apri la console tramite Menu> Strumenti> Console JavaScript.
• accedere monitorEvents(window);

• Visualizza la console inondata di eventi

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

Ci sono altri esempi nella documentazione . Immagino che questa funzione sia stata aggiunta dopo la risposta precedente.

Puoi utilizzare getEventListeners nella tua console per sviluppatori di Google Chrome .

getEventListeners (oggetto) restituisce i listener di eventi registrati sull'oggetto specificato.

getEventListeners(document.querySelector('option[value=Closed]'));