¿Cómo veo los eventos activados en un elemento en Chrome DevTools?

Tengo un elemento de formulario personalizable en una página de una biblioteca. Quiero ver qué eventos de JavaScript se activan cuando interactúo con él porque estoy tratando de averiguar qué controlador de eventos usar.

¿Cómo hago eso usando Chrome Web Developer?

• Presiona F12para abrir Dev Tools
• Haga clic en la pestaña Fuentes
• En el lado derecho, desplácese hacia abajo hasta "Puntos de interrupción de escucha de eventos" y expanda el árbol
• Haga clic en los eventos que desea escuchar.
• Interactúa con el elemento objetivo, si disparan obtendrás un punto de interrupción en el depurador

Del mismo modo, puede hacer clic con el botón derecho en el elemento de destino -> seleccionar "inspeccionar elemento" Desplácese hacia abajo en el lado derecho del marco de desarrollo, en la parte inferior está 'oyentes de eventos'. Expanda el árbol para ver qué eventos están asociados al elemento. No estoy seguro si esto funciona para eventos que se manejan a través del burbujeo (supongo que no)

Puedes usar monitorEvents función .

Simplemente inspeccione su elemento ( right mouse click→ Inspecten el elemento visible o vaya a la Elementspestaña en Chrome Developer Tools y seleccione el elemento deseado) luego vaya a la Consolepestaña y escriba:

monitorEvents($0)

Ahora, cuando mueva el mouse sobre este elemento, enfoque o haga clic en él, el nombre del evento disparado se mostrará con sus datos.

Para dejar de obtener estos datos, simplemente escriba esto en la consola:

unmonitorEvents($0)

$0es solo el último elemento DOM seleccionado por Chrome Developer Tools. Puede pasar cualquier otro objeto DOM allí (por ejemplo, resultado de getElementByIdoquerySelector ).

También puede especificar el "tipo" de evento como segundo parámetro para limitar los eventos monitoreados a un conjunto predefinido. Por ejemplo:

monitorEvents(document.body, 'mouse')

La lista de estos tipos disponibles está aquí .

Hice un pequeño gif que ilustra cómo funciona esta característica:

Visual Event es un pequeño marcador agradable que puedes usar para ver los controladores de eventos de un elemento. En la demostración en línea se puede ver aquí .

Para jQuery (al menos la versión 1.11.2), el siguiente procedimiento funcionó para mí.

1. Haga clic derecho en el elemento y abra 'Herramientas para desarrolladores de Chrome'
2. Escriba $._data(($0), 'events');en la 'Consola'
3. Expanda los objetos adjuntos y haga doble clic en el handler:valor.
4. Esto muestra el código fuente de la función adjunta, busque parte de eso usando la pestaña 'Buscar'.

Y es hora de dejar de reinventar la rueda y comenzar a usar eventos JS de vainilla ... :)

Esto no mostrará eventos personalizados como los que podría crear su script si se trata de un complemento jquery. por ejemplo :

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

El Panel de eventos bajo Scripts en las herramientas de desarrollador de Chrome no le mostrará "Algo: evento personalizado uno"