Inspecione manipuladores de eventos anexados para qualquer elemento DOM

Existe alguma maneira de visualizar quais funções / código são anexados a qualquer evento para um elemento DOM? Usando Firebug ou qualquer outra ferramenta.

Manipuladores de eventos anexados usando tradicional element.onclick= handlerou HTML <element onclick="handler">podem ser recuperados trivialmente a partir da element.onclickpropriedade do script ou do depurador interno.

Os manipuladores de eventos anexados usando addEventListenermétodos de eventos DOM Nível 2 e IEs attachEventnão podem ser recuperados do script. O DOM Nível 3 já propôs element.eventListenerListobter todos os ouvintes, mas não está claro se isso chegará à especificação final. Não há implementação em nenhum navegador hoje.

Uma ferramenta de depuração como extensão do navegador poderia ter acesso a esses tipos de ouvintes, mas não estou ciente de qualquer um que realmente tenha.

Alguns frameworks JS deixam um registro suficiente de associação de eventos para descobrir o que eles têm feito. O Visual Event usa essa abordagem para descobrir ouvintes registrados por meio de algumas estruturas populares.

O painel de elementos nas ferramentas do desenvolvedor do Google Chrome tem isso desde os lançamentos do Chrome em meados de 2011 e os lançamentos do canal do desenvolvedor do Chrome desde 2010.

Além disso, os ouvintes de evento mostrados para o nó selecionado estão na ordem em que são disparados durante as fases de captura e bolha.

Pressione command+ option+ ino Mac OSX e Ctrl+ Shift+ ino Windows para iniciar no Chrome

Chrome Dev Tools anunciou recentemente algumas novas ferramentas para monitorar eventos JavaScript .

TL; DR

Ouça eventos de um determinado tipo usando monitorEvents().

Use unmonitorEvents()para parar de ouvir.

Obtenha ouvintes de um elemento DOM usando getEventListeners().

Use o painel Inspetor de ouvintes de eventos para obter informações sobre ouvintes de eventos.

Encontrar eventos personalizados

Para minha necessidade, descobrindo eventos JS personalizados em código de terceiros, as duas versões a seguir do getEventListeners()foram incrivelmente úteis;

• getEventListeners(window)
• getEventListeners(document)

Se você souber a qual nó DOM o listener de evento foi anexado, você passaria isso em vez de windowou document.

Evento Conhecido

Se você sabe o evento que você deseja monitorar por exemplo, clickno corpo do documento, você poderia usar o seguinte: monitorEvents(document.body, 'click');.

Agora você deve começar a ver todos os eventos de clique no document.bodysendo registrado no console.

Você pode visualizar eventos diretamente anexados (element.onclick = handler) olhando para o DOM. Você pode visualizar eventos anexados a jQuery no Firefox usando FireBug com FireQuery. Não parece haver nenhuma maneira de ver eventos adicionados por addEventListener usando FireBug. No entanto, você pode vê-los no Chrome usando o depurador do Chrome.

Você pode usar o Visual Event de Allan Jardine para inspecionar todos os manipuladores de eventos anexados de várias das principais bibliotecas JavaScript em sua página. Funciona com jQuery, YUI e vários outros.

Visual Event é um bookmarklet JavaScript, portanto é compatível com todos os principais navegadores.

Você pode estender seu ambiente javascript para controlar os ouvintes de eventos. Envolva (ou 'sobrecarregue') o método addEventListener () nativo com algum código que possa manter um registro de qualquer ouvinte de evento adicionado a partir de então . Você também teria que estender HTMLElement.prototype.removeEventListener para manter registros que refletem com precisão o que está acontecendo no DOM.

Apenas para fins de ilustração (código não testado) - este é um exemplo de como você 'empacotaria' addEventListener para ter registros dos ouvintes de eventos registrados no próprio objeto:

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);
}