Domanda Elenca tutti gli eventi javascript cablati su una pagina utilizzando jquery


Usando jQuery, è possibile ottenere un elenco di tutti gli eventi e a quale elemento è associato l'evento?


44
2018-04-13 13:22


origine


risposte:


jQuery rende questo relativamente facile perché memorizza i gestori di eventi nei dati dell'elemento. Dovresti essere in grado di usare qualcosa del genere:

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

e puoi chiamarlo:

// 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

AGGIORNARE: Ho aggiunto un conteggio di gestori e alcune informazioni sugli eventi delegati all'output della funzione precedente.

AGGIORNAMENTO (24/08/2012): Mentre la funzione sopra funziona ancora in jQuery 1.7.2 e precedenti, jQuery non memorizza più l'oggetto evento in jQuery.data(elem, 'events') e se usi jQuery 1.8 o versioni successive non sarai più in grado di utilizzare la funzione precedente!

In cambio di jQuery.data(elem, 'events') ora puoi usare jQuery._data(elem, 'events'). Un aggiornamento della funzione precedente sarebbe simile a questo:

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

AGGIORNAMENTO (4/25/2013): andSelf() è deprecato da 1.8.x http://bugs.jquery.com/ticket/9800 , Ho sostituito con addBack() anziché.


92
2018-04-13 21:00



puoi controllare questo strumento http://www.sprymedia.co.uk/article/Visual+Event+2


6
2018-05-31 13:01



// 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());
  });
});

5
2017-12-12 22:56



Io uso questo per elencare tutti gli elementi che hanno un evento limitato.

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

È anche possibile raccogliere elementi come elenco per ciascun evento scrivendo alcuni codici aggiuntivi come questo:

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

3
2018-03-25 14:06



Scommetto che potresti attraversare il DOM e ispezionare l'evento attributo su ogni elemento che costruisce una lista ... ma non l'ho mai provato.


0
2018-04-13 13:25



Per usare console.table () ho fatto alcune modifiche ...

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

Quindi ora posso fare cose come questa:

console.table($.eventReport())

Guarda cosa succede al chrome: Console in chrome


0
2018-01-02 19:40