trigger - jQuery encuentra los controladores de eventos registrados con un objeto

jquery events w3schools

Question

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

Por ejemplo:

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

$("#el") tiene click y mouseover registrado.

¿Hay una función para descubrir eso, y posiblemente iterar sobre los controladores de eventos?

Si no es posible en un objeto jQuery a través de métodos apropiados, ¿es posible en un objeto DOM plano?

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 este blog de jQuery . Ahora deberías usar esto en su lugar:

jQuery._data( elem, "events" );

elem debe ser un elemento HTML, no un objeto jQuery o un selector.

Tenga en cuenta que esta es una estructura interna, "privada", y no debe modificarse. Utilice esto solo para fines de depuración.

En versiones anteriores de jQuery, es posible que tenga que usar el método anterior, que es:

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

Answer 2

A partir de la versión 1.9 no hay una forma documentada de recuperar los eventos, aparte de usar el complemento Migrar para restaurar el comportamiento anterior. Podría usar el método _.data () como menciones jps, pero ese es un método interno. Entonces, haga lo correcto y use el complemento Migrate si necesita esta funcionalidad.

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

Antes de 1.9, .data ("eventos") podría usarse para recuperar la estructura de datos de eventos internos sin documentar de jQuery para un elemento si ningún otro código había definido un elemento de datos con el nombre de "eventos". Este caso especial ha sido eliminado en 1.9. No hay una interfaz pública para recuperar esta estructura de datos interna, y permanece sin documentar. Sin embargo, el complemento jQuery Migrate restaura este comportamiento para el código que depende de él.

Answer 3

Creé un selector de jQuery personalizado que comprueba tanto la memoria caché de jQuery de los controladores de eventos asignados como los elementos que utilizan el método nativo para agregarlos:

(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á elementos que tienen un controlador de clic adjunto.

Answer 4

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

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

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

Answer 5

Enchufe desvergonzado, pero puedes usar findHandlerJS

Para usarlo, solo tiene que incluir findHandlersJS (o simplemente copiar y pegar el código javascript en bruto en la ventana de la consola de Chrome) y especificar el tipo de evento y un selector de jquery para los elementos que le interesan.

Para su ejemplo, puede encontrar rápidamente los controladores de eventos que mencionó haciendo

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

Esto es lo que se devuelve:

• elemento
  El elemento real donde se registró el controlador de eventos en
• eventos
  Arreglo con información sobre los controladores de eventos jquery para el tipo de evento que nos interesa (por ejemplo, hacer clic, cambiar, etc.)
  • entrenador de animales
    El método del controlador de eventos real que puede ver haciendo clic con el botón derecho sobre él y seleccionando Mostrar definición de función
  • selector
    El selector previsto para eventos delegados. Estará vacío para eventos directos.
  • objetivos
    Lista con los elementos que este controlador de eventos apunta. Por ejemplo, para un controlador de eventos delegado que se registra en el objeto de documento y se dirige a todos los botones de una página, esta propiedad mostrará una lista de todos los botones de la página. Puedes moverlos y verlos resaltados en cromo.

Puedes probarlo here

Answer 6

He combinado ambas soluciones de @jps a una 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 cuidado, esta función solo puede devolver eventos que se configuraron utilizando jQuery.

Answer 7

Los eventos se pueden recuperar usando:

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

o jQuery 1.8+:

jQuery._data(elem, ''events'');

Nota: los eventos delimitados usando $(''selector'').live(''event'', handler) se pueden recuperar usando:

jQuery(document).data(''events'')

Answer 8

Otra forma de hacerlo es simplemente usar jQuery para agarrar el elemento, luego usar 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 9

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

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

El subrayado ("_") es lo que hace la diferencia aquí. Internamente, se llama $.data(element, name, null, true) , el último (cuarto) parámetro es uno interno ("pvt").

Answer 10

Prueba el complemento del depurador jquery si estás usando Chrome: https://chrome.google.com/webstore/detail/jquery-debugger/dbhhnnnpaeobfddmlalhnehgclcmjimi?hl=en

Answer 11

Puedes hacerlo así:

$("#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 las funciones relacionadas con él:

$.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"); }''

Puedes jugar con él en jsFiddle aquí

Answer 12

Tengo que 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 del DOM. Es diferente porque no itera pero apunta directamente al evento que necesita, pero a continuación le daré una respuesta más general.

Tuve 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 de clic adjunto:

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

Mi intención era expandir el área en la que se puede hacer clic a toda la fila, así que primero obtuve todas las imágenes y filas relativas:

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

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

Ahora en la línea de respuesta real, hice lo siguiente, dando una respuesta a la pregunta original:

tr.click(this.onclick);

Así que busqué el controlador de eventos directamente desde el elemento DOM y lo puse en el controlador de eventos de clic jQuery. Funciona de maravilla.

Ahora, al caso general. En los viejos días anteriores a la jQuery, podías obtener todos los eventos adjuntos a un objeto con dos funciones simples pero poderosas que nos fueron otorgadas por mortales 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 13

Yo uso el plugin eventbug para firebug para este propósito.

Answer 14

Para verificar eventos en un elemento:

var events = $._data(element, "events")

Tenga en cuenta que esto solo funcionará con controladores de eventos directos, si está utilizando $ (document) .on ("nombre-evento", "jq-selector", función () {// lógica}), deseará ver el Función getEvents en la parte inferior de esta respuesta.

Por ejemplo:

 var events = $._data(document.getElementById("myElemId"), "events")

o

 var events = $._data($("#myElemId")[0], "events")

Ejemplo completo:

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
        <script>
            $(function() {
                $("#textDiv").click(function() {
                    //Event Handling
                });
                var events = $._data(document.getElementById(''textDiv''), "events");
                var hasEvents = (events != null);
            });
        </script>
    </head>
    <body>
        <div id="textDiv">Text</div>
    </body>
</html>

Una forma más completa de verificar, que incluye escuchas dinámicas, instaladas con $ (documento) .en

function getEvents(element) {
    var elemEvents = $._data(element, "events");
    var allDocEvnts = $._data(document, "events");
    for(var evntType in allDocEvnts) {
        if(allDocEvnts.hasOwnProperty(evntType)) {
            var evts = allDocEvnts[evntType];
            for(var i = 0; i < evts.length; i++) {
                if($(element).is(evts[i].selector)) {
                    if(elemEvents == null) {
                        elemEvents = {};
                    }
                    if(!elemEvents.hasOwnProperty(evntType)) {
                        elemEvents[evntType] = [];
                    }
                    elemEvents[evntType].push(evts[i]);
                }
            }
        }
    }
    return elemEvents;
}

Ejemplo de uso:

getEvents($(''#myElemId'')[0])