jQuery encontrar controladores de eventos registrados con un objeto

Question

Necesito encontrar qué controladores de eventos están registrados sobre un objeto.

Por ejemplo:

$("#el").click(function() {...}); 
$("#el").mouseover(function() {...}); 

$("#el") tiene clic y encima del ratón registrado.

¿Existe alguna función para averiguarlo y, posiblemente, iterar sobre los controladores de eventos?

Si no es posible en un objeto jQuery con los métodos adecuados, ¿es posible en un objeto DOM simple?

Answer 1

A partir de jQuery 1.8, los datos del evento ya no están disponibles en la "API pública" para los datos. Lee this jQuery blog post. Ahora debe utilizar en su lugar:

jQuery._data(elem, "events"); 

elem debería ser un elemento HTML, no un objeto jQuery, o el selector.

Tenga en cuenta que esta es una estructura interna 'privada' y no debe modificarse. Úselo para propósitos de depuración solamente.

En las versiones anteriores de jQuery, puede que tenga que utilizar el método antiguo, que es:

jQuery(elem).data("events"); 

Answer 2

Usted puede hacerlo de esta manera:

$("#el").click(function(){ alert("click");}); 
$("#el").mouseover(function(){ alert("mouseover"); }); 

$.each($("#el").data("events"), function(i, e) { 
    alert(i); 
}); 
//alerts 'click' then 'mouseover' 

Si estás en jQuery 1.4 + , esto alertará al evento y funciones con destino a la misma:

$.each($("#el").data("events"), function(i, event) { 
    alert(i); 
    $.each(event, function(j, h) { 
     alert(h.handler); 
    }); 
}); 
//alerts: 
//'click' 
//'function(){ alert("click"); }' 
//'mouseover' 
//'function(){ alert("mouseover"); }' 

​You can play with it on jsFiddle here

Answer 3

Para jQuery 1.8+, esto ya no funcionará porque los datos internos se colocan en un objeto diferente.

La última no oficial (pero funciona en las versiones anteriores, así, al menos en 1.7.2) forma de hacerlo es ahora - $._data(element, "events")

El guión bajo ("_") es lo que hace la diferencia aquí. Internamente, está llamando al $.data(element, name, null, true), el último (cuarto) parámetro es uno interno ("pvt").

Answer 4

Los eventos pueden ser recuperados usando:

jQuery(elem).data('events'); 

o jQuery 1.8+:

jQuery._data(elem, 'events'); 

Nota: Eventos acotado utilizando $('selector').live('event', handler) se pueden recuperar usando:

jQuery(document).data('events') 

Answer 5

Utilizo el plugin eventbug para el firebug para este propósito.

Answer 6

A partir de 1.9, no existe una forma documentada de recuperar los eventos, salvo el uso del complemento Migrate para restaurar el comportamiento anterior. Puede usar el método _.data() como menciona jps, pero ese es un método interno. Así que haga lo correcto y use el complemento Migrate si necesita esta funcionalidad.

De la documentación de jQuery en .data("events")

Prior to 1.9, .data("events") could be used to retrieve jQuery's undocumented internal event data structure for an element if no other code had defined a data element with the name "events". This special case has been removed in 1.9. There is no public interface to retrieve this internal data structure, and it remains undocumented. However, the jQuery Migrate plugin restores this behavior for code that depends upon it.

Answer 7

Enchufe desvergonzado, pero se puede usar findHandlerJS

Para usarlo sólo hay que incluir findHandlersJS (o simplemente copiar & pegar el raw javascript code a la ventana de la consola de cromo) y especifique el tipo de evento y un selector de jquery para los elementos que le interesan.

Para su ejemplo usted podría qui ckly encontrar los controladores de eventos que usted ha mencionado haciendo

findEventHandlers("click", "#el") 
findEventHandlers("mouseover", "#el") 

Esto es lo que se volvió:

• elemento
  El elemento real en el que el controlador de eventos se registró en
• eventos
  matriz con la información sobre los manejadores de eventos jquery para el tipo de evento que nos interesa (ej. clic, cambio, etc.)
  • manejador
    método actual controlador de eventos que se puede ver haciendo clic derecho y seleccionando Mostrar definición de función
  • selector de
    El selector previsto eventos delegadas. Estará vacío para eventos directos.
  • objetivos
    Lista con los elementos a los que apunta este controlador de eventos. Por ejemplo, para un controlador de eventos delegado que está registrado en el objeto del documento y se dirige a todos los botones en una página, esta propiedad mostrará una lista de todos los botones en la página. Puede colocarlos sobre ellos y verlos resaltados en cromo.

Puede probarlo here

Answer 8

En un navegador moderno con ECMAScript 5.1/Array.prototype.map, también se puede utilizar

jQuery._data(DOCUMENTELEMENT,'events')["EVENT_NAME"].map(function(elem){return elem.handler;}); 

en la consola del navegador, que imprimirá la fuente de los manejadores, delimitados por comas. Útil para echar un vistazo a todo lo que se está ejecutando en un evento en particular.

Answer 9

Debo decir que muchas de las respuestas son interesantes, pero recientemente tuve un problema similar y la solución fue extremadamente simple yendo por el camino DOM. Es diferente porque no iteras, sino que apuntas directamente al evento que necesitas, pero a continuación daré una respuesta más general.

que tenían una imagen en una fila:

<table> 
    <td><tr><img class="folder" /></tr><tr>...</tr></td> 
</table> 

Y esa imagen tenía un controlador de eventos click que se le atribuye:

imageNode.click(function() { ... }); 

Mi intención era ampliar el área seleccionable a toda la fila , así que me dieron todas las imágenes primera y filas relativos:

tableNode.find("img.folder").each(function() { 
    var tr; 

    tr = $(this).closest("tr"); 
    // <-- actual answer 
}); 

Ahora en el real de la línea anwer acabo de hacer de la siguiente manera, de dar una respuesta a la pregunta original:

tr.click(this.onclick); 

Así que fue a buscar el controlador de eventos directamente desde el elemento DOM y ponerlo en el jQuery clic controlador de eventos. Funciona de maravilla.

Ahora, para el caso general. En los viejos tiempos pre-jQuery usted podría conseguir todos los eventos asociados a un objeto con dos funciones simples pero poderosas dotados a los mortales por Douglas Crockford:

function walkTheDOM(node, func) 
{ 
    func(node); 
    node = node.firstChild; 
    while (node) 
    { 
    walkTheDOM(node, func); 
    node = node.nextSibling; 
    } 
} 

function purgeEventHandlers(node) 
{ 
    walkTheDOM(node, function (n) { 
    var f; 

    for (f in n) 
    { 
     if (typeof n[f] === "function") 
     { 
     n[f] = null; 
     } 
    } 
    }); 
} 

Answer 10

He combinado de ambas soluciones @jps a uno función:

jQuery.fn.getEvents = function() { 
    if (typeof(jQuery._data) == 'function') { 
     return jQuery._data(this.get(0), 'events') || {}; 
    } else if (typeof(this.data) == 'function') { // jQuery version < 1.7.? 
     return this.data('events') || {}; 
    } 
    return {}; 
}; 

Pero tenga en cuenta que esta función solo puede devolver los eventos que se establecieron con jQuery.

Answer 11

Otra forma de hacerlo es simplemente utilizar jQuery para tomar el elemento, luego pasar por el Javascript real para obtener y configurar y jugar con los controladores de eventos. Por ejemplo:

var oldEventHandler = $('#element')[0].onclick; 
// Remove event handler 
$('#element')[0].onclick = null; 
// Switch it back 
$('#element')[0].onclick = oldEventHandler; 

Answer 12

Try jQuery depurador complemento si está utilizando chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en

Answer 13

creé un selector personalizado jQuery que comprueba contra el caché de controladores de eventos asignados de tanto jQuery, así como los elementos que utilizan el nativo método para la adición de ellos:

(function($){ 

    $.find.selectors[":"].event = function(el, pos, match) { 

     var search = (function(str){ 
      if (str.substring(0,2) === "on") {str = str.substring(2);} 
      return str; 
     })(String(match[3]).trim().toLowerCase()); 

     if (search) { 
      var events = $._data(el, "events"); 
      return ((events && events.hasOwnProperty(search)) || el["on"+search]); 
     } 

     return false; 

    }; 

})(jQuery); 

Ejemplo:

$(":event(click)") 

Esto devolverá los elementos que tengan un manejador de clics asociado.