Ispezionare i gestori di eventi associati per qualsiasi elemento DOM

C’è un modo per vedere quali funzioni / codice sono collegati a qualsiasi evento per un elemento DOM? Usando Firebug o qualsiasi altro strumento.

I gestori di eventi collegati usando il tradizionale element.onclick= handler o HTML possono essere recuperati banalmente dalla proprietà element.onclick da script o in-debugger.

Gestori di eventi collegati tramite gli eventi DOM Level 2 I metodi addEventListener e al momento non è ansible richiamare attachEvent di IE dallo script. DOM Level 3 una volta proposto element.eventListenerList per ottenere tutti gli ascoltatori, ma non è chiaro se questo farà riferimento alla 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 ciò che effettivamente fa.

Alcuni framework JS lasciano abbastanza record per il binding degli eventi per capire cosa stanno facendo. Visual Event adotta questo approccio per scoprire gli ascoltatori registrati attraverso alcuni framework popolari.

Il pannello Elementi negli strumenti per gli sviluppatori di Google Chrome ha avuto questo da quando Chrome uscirà a metà del 2011 e le versioni dei canali degli sviluppatori di Chrome dal 2010.

Inoltre, gli ascoltatori di eventi mostrati per il nodo selezionato sono nell’ordine in cui vengono triggersti attraverso le fasi di cattura e gorgogliamento.

Premi comando + opzione + i su Mac OSX e Ctrl + Shift + i su Windows per triggersrlo in Chrome

screenshot degli strumenti di sviluppo

Puoi visualizzare direttamente eventi collegati (element.onclick = gestore) guardando il DOM. È ansible visualizzare eventi collegati a jQuery in Firefox utilizzando FireBug con FireQuery. Non sembra che ci sia alcun modo per vedere gli eventi aggiunti addEventListener usando FireBug. Tuttavia, puoi vederli in Chrome utilizzando il debugger di Chrome.

È ansible utilizzare Evento visivo 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.

Evento visivo è un bookmarklet JavaScript quindi è compatibile con tutti i principali browser.

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

TL; DR

Ascolta gli eventi di un certo tipo usando monitorEvents() .

Utilizzare unmonitorEvents() per interrompere l’ascolto.

Ottieni ascoltatori di un elemento DOM utilizzando getEventListeners() .

Utilizza il pannello Ispettore ascoltatori eventi per ottenere informazioni sui listener di eventi.

Trovare eventi personalizzati

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

  • getEventListeners(window)
  • getEventListeners(document)

Se sai quale Nodo DOM è stato collegato al listener degli eventi, lo invierai invece della window o del document .

Evento conosciuto

Se si conosce l’evento che si desidera monitorare, ad esempio click sul corpo del documento, è ansible utilizzare quanto segue: monitorEvents(document.body, 'click'); .

A questo punto dovresti iniziare a vedere tutti gli eventi click sul document.body viene registrato nella console.

Puoi estendere il tuo ambiente javascript per tenere traccia dei listener di eventi. Wrap (o “overload”) il metodo nativo addEventListener () con un codice che può mantenere un record di qualsiasi listener di eventi aggiunto da quel momento in poi . Dovresti anche estendere HTMLElement.prototype.removeEventListener per conservare i record che riflettono accuratamente ciò che accade nel DOM.

Solo per motivi di illustrazione (codice non testato) – questo è un esempio di come si “avvolgere” addEventListener per avere record dei listener di eventi registrati sull’object 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); }