使用 jquery 列出页面上连接的所有 javascript 事件

IT技术 javascript jquery events
2021-02-01 05:01:06

使用 jQuery,是否可以获得所有事件的列表以及事件绑定到的元素?

5个回答

jQuery 使这相对容易,因为它将事件处理程序存储在元素数据中。你应该能够使用这样的东西:

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

你可以称之为:

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

更新: 我在上述函数的输出中添加了处理程序的数量和有关委托事件的一些信息。

更新 (8/24/2012): 虽然上述功能在 jQuery 1.7.2 及更低版本中仍然有效,但 jQuery 不再存储事件对象jQuery.data(elem, 'events')如果您使用 jQuery 1.8 或更高版本,您将无法再使用该功能多于!

作为交换,jQuery.data(elem, 'events')您现在可以使用jQuery._data(elem, 'events'). 对上述函数的更新如下所示:

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

更新(2013 年 4 月 25 日): andSelf()从 1.8.x http://bugs.jquery.com/ticket/9800弃用,我用addBack()代替。

答案不包括文档或窗口上的事件,仅供参考,尽管您可以让它们执行 $.eventReport(document) 和 $.eventReport(window)
2021-03-16 05:01:06
更新了 jQuery 1.8 修复和一些额外的处理程序计数和委托事件的输出。
2021-03-18 05:01:06
我似乎每隔几年就会回到这个问题,它仍然有效。拥有如此出色的工具。
2021-03-21 05:01:06
这是我收集的超酷和有用的脚本。
2021-04-04 05:01:06
@alexandernst,它不是一个数组,而是一个对象。你可以修改它,尽管我会小心地做……它是 jQuery 内部的一部分,用于管理事件。
2021-04-09 05:01:06
// 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());
  });
});

我用这个来列出所有具有有界事件的元素。

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

也可以通过编写一些额外的代码来为每个事件收集元素作为列表:

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

我敢打赌,您可以遍历 DOM 并检查构建列表的每个元素上的 event属性……但我从未尝试过。

为了使用 console.table() 我做了一些修改......

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

所以现在我可以做这样的事情:

console.table($.eventReport())

看看 chrome 会发生什么: chrome 控制台