如何動態註冊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。