且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2023-12-03 09:50:10

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.