如何动态注册jQuery自定义事件？

Question

我已经建立了有私人/公共领域/方法，我有低于简化 DOM对象引擎：

function Engine(args){ 
    this.display = args.display; 

    this.getDisplay = function(){return this.display;} 
    this.alertMsg = function(msg){ 
     console.log(this.display); 
     alert(msg); 
    } 
} 

我想这样做的是建立，将在alert(msg)后触发自定义事件如$(this.display).trigger("afterAlert");

function Engine(args){ 
    this.display = args.display; 

    this.getDisplay = function(){return this.display;} 
    this.alertMsg = function(msg){ 
     console.log(this.display); 
     alert(msg); 
     // trigger custom event here 
     $(this.display).trigger("afterAlert"); 
    } 
} 

现在，这个事件可能是空的或不是。如何将一个或多个对象声明为以后注册到“afterAlert”事件？在我的情况下，额外的JavaScript文件是通过动态的主文件加载，并可能包含一个代码ressembling：

function new_obj(){ 
    bind("afterAlert", function(){ 
     alert("alert was called"); 
    }); 
} 

Answer 1

查看从此question我的答案......重复清晰

我将解决寄存器，触发和解除绑定的自定义事件。

jQuery拥有您需要注册，绑定和解除绑定到自定义事件的所有工具。

下面是将两个div连接到名为customAjaxStart的自定义事件的示例。然后我可以触发这个函数，这两个处理程序都会被调用。

快速演示Here - 启用firebug/ie8控制台。

e.g

$(function() { 

    $('#div1').bind('customAjaxStart', function(){ 
    console.log('#div1 ajax start fired'); 
    $(this).fadeTo('slow', 0.3); 
    }); 

    $('#div2').bind('customAjaxStart', function(){ 
    console.log('#div1 ajax start fired'); 
    $(this).fadeTo('slow', 0.3); 
    }); 

    //fire the custom event 
    $.event.trigger('customAjaxStart'); 

    //unbind div1 from custom event 
    $('#div1').unbind('customAjaxStart'); 

    //again trigger custom event - div1 handler will not fire this time 
$.event.trigger('customAjaxStart'); 
}); 

考虑上述作为一个例子，我会从全局ajaxStart触发customAjaxStart。每当XHR呼叫即将进行（适用于禁止你的部件或表现出加载GIF等），如任何侦听器将自动触发

$.ajaxStart(function(){ 

    $.event.trigger('customAjaxStart'); 

}); 

Answer 2

我想你正在寻找的是观察者模式。至少我是这么实现的。下面的代码段使用不同的名字，但它基本上是你想要做什么（允许注册事件，甚至触发）：

Observable = { 
    addObserver: function(observer) { 
    if (!this.__observers) this.__observers = []; 
    this.__observers.push(observer); 
    }, 
    addGlobalObserver: function(observer) { 
    if (!this.__global_observers) this.__global_observers = []; 
    this.__global_observers.push(observer); 
    }, 
    removeObserver: function(observer) { 
    var newObservers = []; 
    var co; 
    while (co = this.__observers.pop()) { 
     if (co != observer) newObservers.push(co) 
    } 
    this.__observers = newObservers; 
    newObservers = []; 
    while (co = this.__global_observers.pop()) { 
     if (co != observer) newObservers.push(co) 
    } 
    this.__global_observers = newObservers; 
    }, 
    notify: function(event) { 
    var allObservers = this.__global_observers.concat(this.__observers); 
    for (var i=0; i < allObservers.length; i++) { 
     var o = allObservers[i]; 
     if (o[event]) { 
     var args = [] 
     for (var j=1; j < arguments.length; j++) { 
      args.push(arguments[j]) 
     }; 
     o[event].apply(this, args); 
     } 
    }; 
    }, 
    __global_observers: [], 
    __initializer: function() { 
    this.__observers = []; 
    } 
}; 

如果包含此代码到你的类，你可以使用addObserver()事件寄存器（addGlobalObserver()为“职业水平”事件）。在对象内部使用notify()触发事件。

代码取自Coltrane。