Ispeziona i gestori di eventi associati per qualsiasi elemento DOM

C'è un modo per visualizzare quali funzioni / codice sono allegate a qualsiasi evento per un elemento DOM? Utilizzando Firebug o qualsiasi altro strumento.

I gestori di eventi collegati utilizzando tradizionale element.onclick= handlero HTML <element onclick="handler">possono essere recuperati banalmente dalla element.onclickproprietà dallo script o dal debugger.

I gestori di eventi collegati utilizzando i addEventListenermetodi di eventi DOM di livello 2 e IE attachEventnon possono attualmente essere recuperati dallo script. DOM Level 3 una volta ha proposto element.eventListenerListdi ottenere tutti gli ascoltatori, ma non è chiaro se questo raggiungerà la specifica finale. Non c'è implementazione in nessun browser oggi.

Uno strumento di debug come estensione del browser potrebbe ottenere l'accesso a questo tipo di ascoltatori, ma non sono a conoscenza di nessuno che lo faccia effettivamente.

Alcuni framework JS lasciano un record di associazione di eventi sufficiente per capire cosa hanno combinato. Visual Event utilizza questo approccio per individuare i listener registrati tramite alcuni framework popolari.

Il pannello Elements negli strumenti per sviluppatori di Google Chrome ha questo dal rilascio di Chrome a metà 2011 e dal rilascio del canale per sviluppatori Chrome dal 2010.

Inoltre, i listener di eventi visualizzati per il nodo selezionato sono nell'ordine in cui vengono attivati durante le fasi di acquisizione e bubbling.

Premi command+ option+ isu Mac OSX e Ctrl+ Shift+ isu Windows per attivarlo in Chrome

Chrome Dev Tools ha recentemente annunciato alcuni nuovi strumenti per il monitoraggio degli eventi JavaScript .

TL; DR

Ascolta eventi di un certo tipo usando monitorEvents().

Utilizzare unmonitorEvents()per interrompere l'ascolto.

Ottieni ascoltatori di un elemento DOM utilizzando getEventListeners().

Utilizzare il pannello Ispettore dei listener di eventi per ottenere informazioni sui listener di eventi.

Ricerca di eventi personalizzati

Per le mie necessità, scoprendo eventi JS personalizzati nel codice di terze parti, le seguenti due versioni di getEventListeners()sono state incredibilmente utili;

• getEventListeners(window)
• getEventListeners(document)

Se sai a quale nodo DOM era collegato il listener di eventi, lo passerai invece di windowo document.

Evento noto

Se si sa quale evento si desidera monitorare ad esempio clicksul corpo del documento è possibile utilizzare il seguente: monitorEvents(document.body, 'click');.

Dovresti ora iniziare a vedere tutti gli eventi di clic durante l' document.bodyaccesso nella console.

Puoi visualizzare gli eventi collegati direttamente (element.onclick = handler) guardando il DOM. È possibile visualizzare gli eventi allegati a jQuery in Firefox utilizzando FireBug con FireQuery. Non sembra esserci alcun modo per vedere gli eventi aggiunti da addEventListener utilizzando FireBug. Tuttavia, puoi vederli in Chrome utilizzando il debugger di Chrome.

È possibile utilizzare Visual Event di Allan Jardine per ispezionare tutti i gestori di eventi attualmente collegati da diverse librerie JavaScript principali sulla pagina. Funziona con jQuery, YUI e molti altri.

Visual Event è un bookmarklet JavaScript quindi è compatibile con tutti i principali browser.

Puoi estendere il tuo ambiente javascript per tenere traccia dei listener di eventi. Racchiudi (o "sovraccarica") il metodo nativo addEventListener () con del codice che può tenere traccia di qualsiasi listener di eventi aggiunto da quel momento in poi . Dovresti anche estendere HTMLElement.prototype.removeEventListener per mantenere record che riflettano accuratamente ciò che sta accadendo nel DOM.

Solo a scopo illustrativo (codice non testato): questo è un esempio di come si "avvolge" addEventListener per avere record dei listener di eventi registrati sull'oggetto stesso:

var nativeMethod = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.addEventListener = function (type, listener) {
   var el = e.currentTarget;
   if(!(el.eventListeners instanceof Array)) { el.eventListeners = []}
   el.eventListeners.push({'type':type, 'listener':listener});
   nativeMethod.call(el, type, listener);
}