Debug di eventi DOM personalizzati nel browser

Question

È possibile visualizzare (eseguire il debug) eventi personalizzati attivati ​​dagli elementi DOM nel browser?

Diciamo che voglio vedere quale elemento specifico di Bootstrap Collapse genera lo show.bs.collapse event, posso in qualche modo vederlo per esempio negli strumenti di rugiada di Chrome?

Answer 1

Prima di tutto, Monitor Events gestirà questo per eventi JS normali. Tuttavia, gli eventi Bootstrap sono eventi jQuery, quindi gli ascoltatori di eventi JAS vanilla non li ascoltano.

Per ascoltare gli eventi jQuery eseguire il seguente frammento di codice nella vostra console: jQuery('body').bind("show.bs.collapse", function(e){console.log(e);});

sostituire "shown.bs.collapse" con qualsiasi evento che si desidera. Quando sono registrati, basta controllare l'elemento di destinazione per l'evento per sapere cosa l'ha generato.

Ora, per il contrario, per vedere cosa è ascolto per eventi. All'interno del pannello degli elementi, se vai alla scheda listener dell'evento e deseleziona "antenati", vedrai solo i listener di eventi direttamente associati su un elemento. In questo modo sai cosa sta ascoltando per l'evento in modo da poter controllare cosa dovrebbe essere fatto quando viene sparato. Questo è importante, dal momento che potresti scoprire che "body" non sta ricevendo l'evento, dal momento che potrebbe aver annullato le bolle. Quindi, se il frammento di cui sopra non funziona, è necessario controllare la cancellazione delle bolle nell'elemento che ascolta l'evento.

Answer 2

Firefox offre fuori dalla scatola, gli ascoltatori per eventi jQuery, https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_event_listeners

Ma si può allungare: http://flailingmonkey.com/view-jquery-and-jquery-live-events-in-firefox-devtools/

Answer 3

È possibile utilizzare Visual Event 2 bookmarklet. Ottimo strumento utilizzato per ispezionare quali eventi sono collegati a specifici elementi DOM.