javascript - parent jquery

¿Puedo encontrar eventos vinculados a un elemento con jQuery?

Question

Ato dos controladores de eventos en este enlace:

<a href=''#'' id=''elm''>Show Alert</a>

JavaScript:

$(function()
{
  $(''#elm'').click(_f);
  $(''#elm'').mouseover(_m);
});

function _f(){alert(''clicked'');}
function _m(){alert(''mouse over'');}

¿Hay alguna forma de obtener una lista de todos los eventos enlazados en un elemento, en este caso en el elemento con id="elm" ?

Answer 1

Ahora puede simplemente obtener una lista de detectores de eventos vinculados a un objeto mediante la función javascript getEventListeners ().

Por ejemplo, escriba lo siguiente en la consola de herramientas dev:

// Get all event listners bound to the document object
getEventListeners(document);

Answer 2

Caso general:

• Pulsa F12 para abrir Dev Tools
• Haga clic en la pestaña Sources
• En el lado derecho, desplácese hacia abajo hasta Event Listener Breakpoints y expanda el árbol
• Haga clic en los eventos que desea escuchar.
• Interactúa con el elemento objetivo, si se disparan, obtendrás un punto de interrupción en el depurador

Del mismo modo, puede:

• haga clic derecho en el elemento de destino -> seleccione " Inspect element "
• Desplácese hacia abajo en el lado derecho del cuadro de desarrollo, en la parte inferior está el " event listeners ".
• Expanda el árbol para ver qué eventos se adjuntan al elemento. No estoy seguro de si esto funciona para eventos que se manejan a través del burbujeo (supongo que no)

Answer 3

Cuando paso una pequeña consulta de DOM compleja a $ ._ datos como este: $._data($(''#outerWrap .innerWrap ul li:last a''), ''events'') se lanza indefinidamente en la consola del navegador.

Así que tuve que usar $ ._ datos en la $._data($(''#outerWrap'')[0], ''events'') principal: $._data($(''#outerWrap'')[0], ''events'') para ver los eventos de las etiquetas a. Aquí hay un JSFiddle para el mismo: http://jsfiddle.net/giri_jeedigunta/MLcpT/4/

Answer 4

El complemento del complemento de auditoría de jQuery debería permitirte hacer esto a través de las herramientas de desarrollo de Chrome normales. No es perfecto, pero debería permitirle ver el controlador real vinculado al elemento / evento y no solo al controlador genérico jQuery.

Answer 5

En las versiones modernas de jQuery, usaría el método $._data para encontrar cualquier evento adjunto por jQuery al elemento en cuestión. Tenga en cuenta que este es un método de uso interno único:

// Bind up a couple of event handlers
$("#foo").on({
    click: function(){ alert("Hello") },
    mouseout: function(){ alert("World") }
});

// Lookup events for this particular Element
$._data( $("#foo")[0], "events" );

El resultado de $._data será un objeto que contiene los dos eventos que configuramos (en la imagen siguiente con la propiedad mouseout expandida):

Luego, en Chrome, puede hacer clic con el botón derecho en la función de controlador y hacer clic en "ver definición de función" para mostrarle el lugar exacto donde está definido en su código.

Answer 6

Estoy agregando esto para la posteridad; Hay una forma más fácil que no implica escribir más JS. Usando el increíble complemento de FireBug para Firefox ,

1. Haga clic derecho en el elemento y seleccione ''Inspeccionar elemento con Firebug''
2. En los paneles de la barra lateral (que se muestran en la captura de pantalla), navegue a la pestaña de eventos usando la flecha pequeña>
3. La pestaña de eventos muestra los eventos y funciones correspondientes para cada evento.
4. El texto al lado muestra la ubicación de la función.

Answer 7

Si bien esto no es exactamente específico de los selectores / objetos de jQuery, en FireFox Quantum 58.x, puede encontrar controladores de eventos en un elemento utilizando las herramientas de desarrollo:

1. Haga clic derecho en el elemento
2. En el menú contextual, haga clic en ''Inspeccionar elemento''
3. Si hay un icono ''ev'' al lado del elemento (cuadro amarillo), haga clic en el icono ''ev''
4. Muestra todos los eventos para ese elemento y el controlador de eventos.

Answer 8

Tenga en cuenta que los eventos pueden adjuntarse al documento en lugar del elemento en cuestión. En ese caso, querrás usar:

$._data( $(document)[0], "events" );

Y encuentra el evento con el selector correcto:

Y luego mira el controlador > [[FunctionLocation]]

Answer 9

Utilicé algo como esto si ($ ._ data ($ ("a.wine-item-link") [0]). Events == null) {... haga algo, casi vuelva a enlazar sus controladores de eventos} para verificar Si mi elemento está vinculado a algún evento. Todavía dirá indefinido (nulo) si ha desasociado todos los controladores de eventos de ese elemento. Esa es la razón por la que estoy evaluando esto en una expresión if.