使用 jquery 列出页面上连接的所有 javascript 事件 [英] List all javascript events wired up on a page using jquery

问题描述

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

Using jQuery, is it possible to get a list of all the events and to which element the event is bound to?

推荐答案

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

jQuery makes this relatively easy because it stores the event handlers in the element data. You should be able to use something like this:

(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('
', h, ' ', p, ' handler', h > 1 ? 's' : '');
                if(r.delegateCount) {
                    for(var q = 0; q < r.length; q++)
                        if(r[q].selector) s.push('
', p, ' for ', r[q].selector);
                }
            }
            s.push('

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

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

UPDATE: I added a count of handlers and some information about delegated events to the output of the above function.

更新(8/24/2012):虽然上述函数在 jQuery 1.7.2 及更低版本中仍然有效，但 jQuery 不再将事件对象存储在 jQuery.data(elem, 'events') 和 (如果您使用的是 jQuery 1.8 或以后您将无法再使用上述功能！

UPDATE (8/24/2012): While the function above still works in jQuery 1.7.2 and lower, jQuery no longer stores the event object in jQuery.data(elem, 'events') and if you are using jQuery 1.8 or later you will no longer be able to use the function above!

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

In exchange for jQuery.data(elem, 'events') you can now use jQuery._data(elem, 'events'). An update to the function above would look like this:

(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('
', h, ' ', p, ' handler', h > 1 ? 's' : '');
                if(r.delegateCount) {
                    for(var q = 0; q < r.length; q++)
                        if(r[q].selector) s.push('
', p, ' for ', r[q].selector);
                }
            }
            s.push('

');
        });
        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() 代替.

UPDATE (4/25/2013): andSelf() is deprecated from 1.8.x http://bugs.jquery.com/ticket/9800 , I replaced with addBack() instead.

这篇关于使用 jquery 列出页面上连接的所有 javascript 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！