Question

我想知道是否可以这样做：

在我的网站中，我使用了很多jQuery插件来解决我不知道的不同事件。

有没有办法 - 程序，浏览器插件或其他东西 - 我可以浏览网站并获取每次点击时触发的确切javascript事件列表？

例如，我有一个jQuery插件，当我右键单击任何元素时，自定义contextMenu显示，然后当我点击其中一个选项时，其他事情就出现了。我需要确切地知道Javascript基本事件被触发了什么：

 $('input:submit, button:submit').rightClick(function (e) {
    $(this).contextMenu('contextMenuInput', {
        'Capture This': {
            click: function (element) {   // element is the jquery obj clicked on when context menu launched
                doSomething();
            },
            klass: "kgo" // a custom css class for this menu item (usable for styling)
        },
        'Create List': {
            click: function (element) {
            },
            klass: "kfilter kdisabled"
        },
        'Collect Data': {
            click: function (element) {
            },
            klass: "kcapture kdisabled"
        }
    },
    { disable_native_context_menu: true }
);
});

有没有人有任何想法？

Answer 1

您可以使用以下代码显示当前绑定的事件....

以下是使用此代码的示例：http://jsfiddle.net/manseuk/CNjs3/

(function($) {
    $.eventReport = function(selector, root) {
        var s = [];
        $(selector || '*', root).andSelf().each(function() {
            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);
            for(var p in e) s.push('\n', p);
            s.push('\n\n');
        });
        return s.join('');
    }
    $.fn.eventReport = function(selector) {
        return $.eventReport(selector, this);
    }
})(jQuery);

像这样使用 - ＆gt;

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

根据评论更新

如果你想看看这些事件的约束，这是一个很好的工具 - ＆gt; http://www.sprymedia.co.uk/article/Visual+Event

Answer 2

这不是你想要的，但是使用firebug，你可以记录给定DOM元素的事件。

您可以通过右键单击html选项卡中的元素并单击日志事件来执行此操作：

enabling log events for a dom element in firebug

事件日志：

logged events

您可能还会发现firebug扩展“EventBug”非常有用：

有兴趣跟踪用户浏览网站时被触发的事件

2 个答案:

根据评论更新