jqueryカスタムイベントに動的に登録するには？

Question

私は、パブリック/プライベートフィールド/ Iは、以下のをを簡素化している方法がある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には、カスタムイベントに登録、バインド、バインド解除するために必要なすべてのツールがあります。

以下は、2つのdivをcustomAjaxStartというカスタムイベントに連結する例です。私はこの関数を起動することができ、両方のハンドラが呼び出されます。

クイックデモHere - firebug/ie8コンソールを有効にしてください。 IグローバルajaxStartからcustomAjaxStartをトリガする例として、上記を考える例えば

$(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'); 
}); 

。 XHRコールが例えば（負荷のgifなどを、あなたのウィジェットを無効にするかを示すための理想的な）行われようとしている時はいつでも任意のリスナーが自動的に起動されるだろう

$.ajaxStart(function(){ 

    $.event.trigger('customAjaxStart'); 

}); 

Answer 2

私は何を探していることはObserverパターンだと思います。少なくともそれは私がそれを実装する方法です。次のコードスニペットは、異なる名前を使用していますが、それはあなたが（イベントのために登録し、さらにトリガーことができます）欲しいもの、本質的に行います。

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から取得しました。