Javascript文本对象能否触发事件？

我有一个Javascript对象文本：

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.Bar.find('clearButton').click(function() {
            this.trigger('clear'); // doesn't work!
            this.Bar.trigger('clear'); // works!
    }
}

Toolbar.init($('div.toolbar'));
Toolbar.bind('clear', function() { ... }); // doesn't work!
Toolbar.Bar.bind('clear', function() { ... }); // works!

我希望能够触发工具栏对象文本上的

clear

事件，而不是文本中引用的工具栏DOM对象。这可能吗？如果可能的话，我该怎么做

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.trigger =
            function() { this.Bar.trigger.apply(this.Bar, arguments); };

        this.bind = function() { this.Bar.bind.apply(this.Bar, arguments); };

        this.Bar.find('clearButton').click(function() {
            this.trigger('clear');
    }
};

Toolbar.init();
Toolbar.bind('clear', function() { ... });

如果需要，可以创建一个函数来处理包装；根据您的喜好，可选择以下任一选项：

function wrapperitize(wrapper, wrappee, method /*, more_methods...*/)
{
    wrapper[method] = function() { wrappee[method].apply(wrappee, arguments); };
    for(var i = 3; i < arguments.length; ++i)
        wrapperitize(wrapper, wrappee, arguments[i]);
}

function wrapperitize(wrapper, wrappeeProp, method /*, more_methods...*/)
{
    wrapper[method] = function()
    {
        wrapper[wrappeeProp][method].apply(wrapper[wrappeeProp], arguments);
    };
    for(var i = 3; i < arguments.length; ++i)
        wrapperitize(wrapper, wrappeeProp, arguments[i]);
}

函数包装化（包装，包装，方法/*，更多方法…*/）
{
包装器[method]=函数（）{wrappee[method]。应用（wrappee，参数）；}；
对于（变量i=3；i

其中前者称为

wrapperitize（this，this.Bar，'trigger'，'bind'）

，后者称为

wrapperitize（this，'Bar'，'trigger'，'bind'）

（区别在于前者将使

this

成为当前

this.Bar

的包装器，而后者将使

this

成为未来可能成为的任何

this.Bar的包装器

（顺便说一句，注意一点递归。这是为了避免有问题的变量捕获，因为闭包在JavaScript中的工作方式。）
如果您希望能够调用
工具栏上的方法
对象，您需要在那里定义它。如果您不需要以这种方式添加很多方法，您可以在工具栏对象本身中定义它们：

var Toolbar = {
    clear: function() { this.Bar.trigger('clear'); }

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal
        this.Bar.find('clearButton').click(function() {
            this.clear(); 
    }
}

但是，如果您需要调用很多方法，这将很快变得难看。如果您真的希望能够调用工具栏对象上jquery对象的所有可用方法，您可以尝试使用
for in
循环遍历所有方法，并将它们添加到工具栏对象中，但这将是一个冗长、烦人的阅读过程，无法完成icient，并可能导致一些错误。只要您想在该对象上调用方法，我就会使用
$（工具栏）
，因为它消除了所有这些缺点。：D
这应该可以：

var Toolbar = {

    init: function(toolbar) {
        this.Bar = $(toolbar); // scope is Toolbar object literal

        this.Bar.find('.clearButton').click($.proxy(function() {
            $(this).trigger('clear'); // should work now
            this.Bar.trigger('clear'); // still works
        }, this));
    }
};

Toolbar.init($('div.toolbar'));

$(Toolbar).bind('clear', function() { 
    console.log('Toolbar'); 
}); // should work now

Toolbar.Bar.bind('clear', function() { 
    console.log('Toolbar.Bar'); 
}); // still works

您需要在click函数中维护
this
引用。我使用了
$.proxy
；有些人使用
var self=this；

Toolbar
不是jQuery对象，因此应将其包装在
$（）
中以访问jQuery的函数。还应包装引用单击函数中的
工具栏
实例的
此

是否应该将某些内容传递给
init
？无论如何，我认为错误消息应该非常清楚“为什么它不工作”。至少，在帖子中包含它们。更正了我的问题，我忘记了在
init（）中包含jQuery对象
call。当我说“不起作用”时，我的意思是一个对象文字看起来不可能触发事件（这是有意义的，因为它不是DOM对象）。