Usando jQuery, es posible obtener una lista de todos los eventos y a los elementos que el caso está vinculado a?

  • Echa un vistazo a <a href=»bugs.jquery.com/ticket/10589 .de datos («eventos») se ha ido ahora
  • Gracias, @SkylarSaveland, estoy actualizando mi respuesta a continuación.
InformationsquelleAutor | 2009-04-13

6 Comentarios

  1. 92

    jQuery hace que esta relativamente fácil porque almacena los controladores de eventos en el elemento de datos. Usted debe ser capaz de usar algo como esto:

    (function($) {
        $.eventReport = function(selector, root) {
            var s = [];
            $(selector || '*', root).andSelf().each(function() {
                //the following line is the only change
                var e = $.data(this, 'events');
                if(!e) return;
                s.push(this.tagName);
                if(this.id) s.push('#', this.id);
                if(this.className) s.push('.', this.className.replace(/+/g, '.'));
                for(var p in e) {
                    var r = e[p],
                        h = r.length - r.delegateCount;
                    if(h)
                        s.push('\n', h, ' ', p, ' handler', h > 1 ? 's' : '');
                    if(r.delegateCount) {
                        for(var q = 0; q < r.length; q++)
                            if(r[q].selector) s.push('\n', p, ' for ', r[q].selector);
                    }
                }
                s.push('\n\n');
            });
            return s.join('');
        }
        $.fn.eventReport = function(selector) {
            return $.eventReport(selector, this);
        }
    })(jQuery);

    y que se le puede llamar:

    //all events
    alert($.eventReport());
    
    //just events on inputs
    alert($.eventReport('input')); 
    
    //just events assigned to this element
    alert($.eventReport('#myelement')); 
    
    //events assigned to inputs in this element
    alert($.eventReport('input', '#myelement')); 
    alert($('#myelement').eventReport('input')); //same result
    
    //just events assigned to this element's children
    alert($('#myelement').eventReport()); 
    alert($.eventReport('*', '#myelement'); //same result

    ACTUALIZACIÓN:
    He añadido un recuento de los controladores y un poco de información acerca de la delegada de eventos a la salida de la función anterior.

    ACTUALIZACIÓN (8/24/2012):
    Mientras que la función de arriba, todavía funciona en jQuery 1.7.2 y menor, jQuery ya no almacena el objeto de evento en jQuery.data(elem, 'events') y si usted está usando jQuery 1.8 o más tarde, usted ya no será capaz de utilizar la función de arriba!

    De cambio de jQuery.data(elem, 'events') ahora puede utilizar jQuery._data(elem, 'events'). Una actualización a la función anterior sería así:

    (function($) {
        $.eventReport = function(selector, root) {
            var s = [];
            $(selector || '*', root).addBack().each(function() {
                //the following line is the only change
                var e = $._data(this, 'events');
                if(!e) return;
                s.push(this.tagName);
                if(this.id) s.push('#', this.id);
                if(this.className) s.push('.', this.className.replace(/+/g, '.'));
                for(var p in e) {
                    var r = e[p],
                        h = r.length - r.delegateCount;
                    if(h)
                        s.push('\n', h, ' ', p, ' handler', h > 1 ? 's' : '');
                    if(r.delegateCount) {
                        for(var q = 0; q < r.length; q++)
                            if(r[q].selector) s.push('\n', p, ' for ', r[q].selector);
                    }
                }
                s.push('\n\n');
            });
            return s.join('');
        }
        $.fn.eventReport = function(selector) {
            return $.eventReport(selector, this);
        }
    })(jQuery);

    ACTUALIZACIÓN (4/25/2013):
    andSelf() está en desuso desde 1.8.x http://bugs.jquery.com/ticket/9800 , he reemplazado con addBack() lugar.

    • Actualizado con jQuery 1.8 revisión y algunas de salida adicionales para el controlador de recuento y de la delegada de eventos.
    • La respuesta no incluye los eventos en el documento o ventana, para su INFORMACIÓN, aunque se puede llegar a hacer $.eventReport(documento) y $.eventReport(ventana)
    • Parece que estoy volviendo a este cada pocos años, y todavía está funcionando. Una herramienta fantástica para tener.
    • Esto va para mi colección de super-cool y scripts útiles.
    • Es posible editar el var r = e[p] matriz? Estoy preguntando porque no se ven como un «normal» de la matriz, sino algo más/nativo.
    • no es una matriz, sino un objeto. Se puede modificar aunque me gustaría hacerlo con cuidado… es parte de jQuery interna, se utiliza para gestionar los eventos.

  2. 5
    //List bound events
    console.log($('#elem').data('events'));
    
    //Log ALL handlers for ALL events
    $.each($('#elem').data('events'), function(i, event) {
      $.each(event, function(i, handler){
        console.log(handler.toString());
      });
    });
  3. 3

    Yo uso esta para que la lista de todos los elementos que tiene una limitada evento.

    $('*').each(function(){
        var events = $(this).data('events');
        if(events != null)
        {
            console.log(this);
            console.log(events);
        }
    });

    También es posible recoger elementos como una lista para cada evento por escrito algunos códigos adicionales como esta:

    var eventArrays = {};
    
    $('*').each(function(){
        var events = $(this).data('events');
        for(var anEvent in events){
            if(!eventArrays[anEvent])
                eventArrays[anEvent] = [];
            eventArrays[anEvent].push(this);
        }
    });
    
    console.log(eventArrays);
  4. 0

    Apuesto a que podría atravesar el DOM e inspeccionar el evento atributo en cada elemento de la creación de una lista… pero yo nunca lo he probado.

  5. 0

    Para el uso de la consola.tabla() hice algunas modificaciones…

    (function($) {
        $.eventReport = function(selector, root) {
            var s = [];
            $(selector || '*', root).addBack().each(function() {
                var e = $._data(this, 'events');
                if(!e) return;
                var tagGroup = this.tagName || "document";
                if(this.id) tagGroup += '#' + this.id;
                if(this.className) tagGroup += '.' + this.className.replace(/+/g, '.');
    
                var delegates = [];
                for(var p in e) {
                    var r = e[p];
                    var h = r.length - r.delegateCount;
    
                    if(h)
                        s.push([tagGroup, p + ' handler' + (h > 1 ? 's' : '')]);
    
                    if(r.delegateCount) {
                        for(var q = 0; q < r.length; q++)
                            if(r[q].selector) s.push([tagGroup + ' delegates', p + ' for ' + r[q].selector]);
                    }
                }
            });
            return s;
        }
        $.fn.eventReport = function(selector) {
            return $.eventReport(selector, this);
        }
    })(jQuery);

    Así que ahora puedo hacer cosas como esta:

    console.table($.eventReport())

    Ver lo que sucede en chrome:
    Lista de todos los eventos de javascript cableado en una página con jquery

Dejar respuesta

Please enter your comment!
Please enter your name here