100

Ho un elenco di selezione:Come scoprire quali eventi JavaScript sono stati attivati?

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

Quando seleziono Closed la pagina viene ricaricata. In questo caso mostra biglietti chiusi (anziché aperti). Funziona bene quando lo faccio manualmente.

Il problema è che la pagina non ricaricare quando seleziono Closed con Watir:

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

Che di solito significa che qualche evento JavaScript non viene licenziato. Posso licenziare eventi con Watir:

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

ma ho bisogno di sapere quale evento sparare.

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

+0

Questa domanda elenca più strumenti: http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool –

+2

Evento visivo, http: //www.sprymedia.co.uk/article/Visual+Event. Sono sicuro che questo aiuterà metà delle persone che atterrano su questa pagina di stackoverflow :) – Cedric

risposta

111

Sembra Firebug (add-on Firefox) ha la risposta:

  • aperta Firebug
  • tasto destro del mouse l'elemento nella scheda HTML
  • click Log Events
  • consentono scheda Console
  • click Persistere nella scheda Console (altrimenti la scheda Console verrà cancellata dopo il caricamento della pagina)
  • selezionare Closed (manualmente)
  • ci sarà qualcosa di simile in 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: Firebug Tip: Log Events

+3

Grazie mille, non sapevo di questa funzionalità di Firebug. Forse ho bisogno di effettivamente RTFM un po 'di tempo. –

+0

Non lo sapevo fino a pochi minuti fa. Stavo scrivendo la domanda e ho trovato la risposta lungo la strada. :) –

+0

La tua domanda assomiglia molto alla mia (risposta personale, con auto-commenti). – vol7ron

106

Ho pensato di aggiungere che si può fare questo in Chrome, nonché :

Ctrl +Maiusc +I (Strumenti per sviluppatori)> Origini> Punti di interruzione listener evento (a destra).

Puoi anche visualizzare tutti gli eventi che sono già stati collegati semplicemente facendo clic con il pulsante destro sull'elemento e sfogliando le sue proprietà (il riquadro sulla destra).

Ad esempio:

  • Fare clic destro sul pulsante upvote a sinistra
  • Selezionare ispezionare elemento
  • Comprimi sezione stili (sezione in fondo a destra - doppio chevron)
  • Espandere l'opzione listener di eventi
  • Ora è possibile vedere gli eventi legati alla upvote
  • Non sono sicuro se è abbastanza potente come l'opzione di firebug, ma è stato sufficiente per la maggior parte delle mie cose.

    Un'altra opzione che è un po 'diverso, ma sorprendentemente impressionante è visivo evento: http://www.sprymedia.co.uk/article/Visual+Event+2

    Si mette in evidenza tutti gli elementi di una pagina che sono stati legati e ha popovers che mostrano le funzioni che sono chiamati. Abbastanza elegante per un segnalibro! C'è anche un plug-in di Chrome se questo è più il tuo problema, non sono sicuro degli altri browser.

    AnonymousAndrew ha anche sottolineato monitorEvents(window);here

    +2

    Non riuscivo a capire come vedere quali eventi hanno sparato con entrambi i modi che hai suggerito. Aggiornamento –

    +1

    : non è 'Script' all'interno degli strumenti Dev (o ispettore), devi andare in' Sorgenti' e poi guardare il menu sulla destra. – aledalgrande

    +0

    @aledalgrande Grazie, ho aggiornato. (Per chiunque stia leggendo, questo si applica solo alla prima soluzione, la seconda usa ancora l'ispettore). – Chris

    54

    quanto riguarda Chrome, checkout monitorEvents() tramite la riga di comando API.

    • Aprire la console tramite Menu> Strumenti> Console JavaScript.
    • Enter monitorEvents(window);
    • Vedere le console inondato di eventi

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

    Ci sono altri esempi nel documentation. Suppongo che questa funzione sia stata aggiunta dopo la risposta precedente.

    +3

    Bello! In congiunzione con jQuery: 'monitorEvents ($ ('# elemento'). Get())' – Klaus