列出使用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?

推荐答案

p> 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('\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

更新：
我将一些处理程序和一些关于委托事件的信息添加到上述函数的输出中。

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或更高版本，您将无法再使用上述功能！

为了交换 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('\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);

更新（4/25/2013）：
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屋！