Comment s'inscrire dynamiquement aux événements personnalisés de jquery?

Question

J'ai construit un moteur objet dom qui a des champs/méthodes privées/publiques que j'ai simplifié ci-dessous:

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

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

Ce que je voudrais faire est de construire un événement personnalisé qui serait déclenché après la alert(msg) tel que $(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"); 
    } 
} 

Maintenant, cet événement peut être vide ou non. Comment un ou plusieurs objets déclarés plus tard s'enregistrer à l'événement "afterAlert"? Dans mon cas, les fichiers javascript supplémentaires sont chargés par le fichier principal dynamique et pourrait contenir un code ressemblant à:

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

Answer 1

Voir ma réponse de cette question ... répétée pour plus de clarté

j'aborder le registre, le déclenchement et la déliaison des événements personnalisés. JQuery possède tous les outils dont vous avez besoin pour enregistrer, lier et dissocier des événements personnalisés. Voici un exemple de connexion de deux divs à un événement personnalisé appelé customAjaxStart. Je peux alors déclencher cette fonction et les deux gestionnaires seront appelés.

Démonstration rapide Here - La console firebug/ie8 est activée.

par exemple

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

Prenant ce qui précède à titre d'exemple, je déclencherait l'customAjaxStart du ajaxStart mondial. Tous les auditeurs seraient déclenchées automatiquement chaque fois qu'un appel XHR est sur le point d'être fait (idéal pour désactiver vos widgets ou montrant un etc de chargement gif) par exemple

$.ajaxStart(function(){ 

    $.event.trigger('customAjaxStart'); 

}); 

Answer 2

Je pense que ce que vous cherchez est le modèle d'observateur. Au moins c'est comme ça que je l'implémenterais. L'extrait de code suivant utilise des noms différents, mais il fait essentiellement ce que vous voulez (permet l'enregistrement des événements, et même le déclenchement):

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 = []; 
    } 
}; 

Si vous ajoutez ce code dans votre classe, vous pouvez vous inscrire pour les événements à l'aide addObserver() (addGlobalObserver() pour les événements de "niveau de classe"). A l'intérieur de l'objet, vous déclenchez un événement en utilisant notify().

Code provenant de Coltrane.