¿Puedo encontrar eventos vinculados en un elemento con jQuery?


355

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"?

Respuestas:


517

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):

Salida de consola por $ ._

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.


59
Esto solo funciona para elementos vinculados a través de los ayudantes jQuery.
Alex Ciminian

3
@jammypeach Estoy intentando su solución, pero aún recibo una respuesta indefinida para el selector. Usé $ ('# elem'). Bind ('click', function () {}); si eso marcaría la diferencia
Marcus

66
@marcus ahhh, woops, me perdí algo, lo siento :)$._data(element[0], ‘events’);
totallyNotLizards

16
En estos días uno debe usar: $ ._ data ($ ('# foo') [0]) .events
Donald Taylor

55
$._data()es utilizado por JQuery interno. $.data()Es el método público para el usuario. Y $.data(element, 'events')funciona bien.
slideshowp2

73

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)

3
Estoy de acuerdo en que este es el método preferido y es una solución universal, en lugar de depender de jQuery, que puede o no estar disponible.
deadbabykitten

3
@dead umm ... la pregunta se refiere específicamente a jQuery y usa jQuery en el archivo adjunto de ejemplo: la respuesta solo debe ser válida en el contexto de jQuery (?)
Code Jockey

3
Es útil comprender las respuestas en otros contextos también. El hecho de que alguien haga una pregunta específica no significa que la respuesta restringida que recibirá sea la mejor disponible. Especialmente con jQuery, las personas tienden a confiar en él como una muleta. Comprender la arquitectura subyacente es importante. Esta respuesta muestra que jQuery ni siquiera es necesariamente necesario. La pregunta y el ejemplo son demasiado vagos para conocer el uso y, por lo tanto, dejan abierta la interpretación de lo que podría considerarse una respuesta válida.
deadbabykitten

12

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

ingrese la descripción de la imagen aquí


1
Esto también está disponible en las herramientas de desarrollo de IE.
Devlin Carnate

9

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

44
Creo que no es una función nativa y necesita el siguiente script / dependencia: github.com/colxi/getEventListeners Esto debería agregarse a la respuesta, ya que de lo contrario es engañoso. Pero gracias por llevarme a ese 'complemento'; se ve bien. :)
Dennis98

6

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.


3

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.

FF Quantum Dev Tools


1
impresionante respuesta, especialmente la captura de pantalla hace que sea mucho más fácil. ¡Gracias por el esfuerzo!
bizi

2

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.


2

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 :

ingrese la descripción de la imagen aquí

Y luego mira el controlador > [[FunctionLocation]]

ingrese la descripción de la imagen aquí


0

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/


3
La razón de esto es que está delegando el evento de $('#outerWrap') . Los eventos están realmente vinculados a ese elemento en lugar de los anclajes individuales.
Scottux
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.