w3schools - jquery trigger




jQuery encuentra los controladores de eventos registrados con un objeto (10)

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?


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

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.


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.


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


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

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;


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í


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


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




dom