Inspeccione los controladores de eventos adjuntos para cualquier elemento DOM

¿Hay alguna forma de ver qué funciones / código se adjuntan a cualquier evento para un elemento DOM? Usando Firebug o cualquier otra herramienta.

Los controladores de eventos adjuntos mediante element.onclick= handlerHTML o tradicional <element onclick="handler">se pueden recuperar de forma trivial desde la element.onclickpropiedad desde el script o en el depurador.

Los controladores de eventos adjuntos mediante los addEventListenermétodos de eventos DOM Nivel 2 e IE attachEventno se pueden recuperar actualmente del script. DOM Level 3 una vez propuso element.eventListenerListobtener todos los oyentes, pero no está claro si esto llegará a la especificación final. Actualmente, no hay implementación en ningún navegador.

Una herramienta de depuración como extensión del navegador podría tener acceso a este tipo de oyentes, pero no conozco ninguno que realmente lo haga.

Algunos frameworks JS dejan suficiente registro de enlace de eventos para averiguar lo que han estado haciendo. Visual Event adopta este enfoque para descubrir oyentes registrados a través de algunos marcos populares.

El Panel de elementos en las herramientas para desarrolladores de Google Chrome ha tenido esto desde los lanzamientos de Chrome a mediados de 2011 y los lanzamientos del canal de desarrolladores de Chrome desde 2010.

Además, los detectores de eventos que se muestran para el nodo seleccionado están en el orden en que se activan a través de las fases de captura y propagación.

Presione command+ option+ ien Mac OSX y Ctrl+ Shift+ ien Windows para iniciar esto en Chrome

Chrome Dev Tools anunció recientemente algunas herramientas nuevas para monitorear eventos de JavaScript .

TL; DR

Escuche eventos de cierto tipo usando monitorEvents().

Úselo unmonitorEvents()para dejar de escuchar.

Obtenga oyentes de un elemento DOM usando getEventListeners().

Utilice el panel Inspector de oyentes de eventos para obtener información sobre los oyentes de eventos.

Encontrar eventos personalizados

Para mi necesidad, al descubrir eventos JS personalizados en código de terceros, las siguientes dos versiones getEventListeners()fueron increíblemente útiles;

• getEventListeners(window)
• getEventListeners(document)

Si sabe a qué nodo DOM se adjuntó el detector de eventos, lo pasaría en lugar de windowo document.

Evento conocido

Si usted sabe qué evento que desea supervisar, por ejemplo clicken el cuerpo del documento se puede utilizar el siguiente: monitorEvents(document.body, 'click');.

Ahora debería comenzar a ver todos los eventos de clic en el document.bodyregistro en la consola.

Puede ver los eventos adjuntos directamente (element.onclick = handler) mirando el DOM. Puede ver los eventos adjuntos de jQuery en Firefox usando FireBug con FireQuery. No parece haber ninguna forma de ver los eventos agregados de addEventListener usando FireBug. Sin embargo, puede verlos en Chrome usando el depurador de Chrome.

Puede utilizar Visual Event de Allan Jardine para inspeccionar todos los controladores de eventos adjuntos actualmente de varias de las principales bibliotecas de JavaScript de su página. Funciona con jQuery, YUI y varios otros.

Visual Event es un marcador de JavaScript, por lo que es compatible con los principales navegadores.

Puede ampliar su entorno javascript para realizar un seguimiento de los oyentes de eventos. Envuelva (o 'sobrecargue') el método nativo addEventListener () con algún código que pueda mantener un registro de cualquier detector de eventos agregado a partir de ese momento . También tendría que extender HTMLElement.prototype.removeEventListener para mantener registros que reflejen con precisión lo que está sucediendo en el DOM.

Solo por el bien de la ilustración (código no probado): este es un ejemplo de cómo 'envolvería' addEventListener para tener registros de los oyentes de eventos registrados en el propio 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);
}