¿Puedo encontrar eventos vinculados en un elemento con jQuery?

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 vinculados a un elemento, en este caso, al elemento con id="elm"?

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

// 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 $._dataserá un objeto que contiene los dos eventos que establecemos (en la foto a continuación con la mouseoutpropiedad expandida):

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

Caso general:

• Presiona F12para abrir Dev Tools
• Haz clic en la Sourcespestaña
• En el lado derecho, desplácese hacia abajo Event Listener Breakpointsy 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, puedes:

• haga clic derecho en el elemento de destino -> seleccione " Inspect element"
• Desplácese hacia abajo en el lado derecho del marco de desarrollo, en la parte inferior está ' event listeners'.
• 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)

Estoy agregando esto para la posteridad; Hay una manera más fácil que no implica escribir más JS. Usando el increíble complemento 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 pequeña flecha>
3. La pestaña de eventos muestra los eventos y las funciones correspondientes para cada evento.
4. El texto al lado muestra la ubicación de la función

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

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

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

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

Si bien esto no es exactamente específico para los selectores / objetos 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 ícono 'ev' al lado del elemento (cuadro amarillo), haga clic en el ícono 'ev'
4. Muestra todos los eventos para ese elemento y controlador de eventos.

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

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

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

Y encuentre el evento con el selector correcto :

Y luego mira el controlador > [[FunctionLocation]]

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

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