Как динамически регистрироваться в пользовательских событиях jquery?

Question

Я построил объект дом двигатель, который имеет частные/государственные поля/методы, которые я имею упрощена ниже:

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 есть все инструменты, необходимые для регистрации, привязки и привязки к пользовательским событиям.

Ниже приведен пример подключения двух разделов к пользовательскому событию под названием customAjaxStart. Затем я могу запустить эту функцию, и оба обработчика будут вызваны.

Quick Demo Here - Включить консоль firebug/ie8.

например

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

Принимая выше в качестве примера я хотел бы вызвать в customAjaxStart от глобального ajaxStart. Все слушатели будут автоматически запускаются каждый раз, когда 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.