9045


jQueryを利用して`$('.target').on('myEvent',function(){});`とすると`myEvent`がトリガされた時に実行する関数を登録することができますが、対象のDOMが存在しないオブジェクトを利用してカスタムイベントを実装するにはどうすればよいのでしょうか。

実装が雑ですが以下コードによる質問の詳細になります。

[code]

    var dataLoader = {
      load: function(){
        $.get('http://example.com/api/get_data').done(function(data){
          dataLoader.trigger('onloaded'); // カスタムイベントを発火させたいがtriggerなど存在しない。
        });
      },
    };
    
    dataLoader.on('onloaded',function(){}); // onを利用してイベントリスンしたいがonなど存在しない。
    dataLoader.load();
    
[/code]


CC BY-SA 3.0
2015-04-11T03:33:00.210
9041
2015-04-11T07:08:50.517
5840
question
javascript
JavascriptでDOM以外のオブジェクトを利用してカスタムイベントを実装するには？


自前で配列を管理しておけば良いのでは

[code]

    var dataLoader = {
    
        _handlers: {
            // 下のようなデータが入る
            // onloaded: [function (e) { }, function (e) { }, function (e) { }]
        },
    
        on: function (event, handler) {
            (this._handlers[event] || (this._handlers[event] = [])).push(handler);
        },
    
        trigger: function (event) {
            var list = this._handlers[event];
            if (list) {
                var eventArg = {}; // イベント引数
                list.forEach(function (h) {
                    h.call(this, eventArg);
                }, this);
            }
        }
    };
    
[/code]


CC BY-SA 3.0
2015-04-11T03:52:57.853
9043
2015-04-11T03:52:57.853
5750
9041
answer


jQueryのイベント部分は、DOMオブジェクト以外に対しても使えます。単に任意のオブジェクトを`$()`に渡せば、`on`や`trigger`が使えるようになります。

[code]

    var o = $({});
    o.on('myEvent', function() {
      console.log('myEvent!');
    });
    o.trigger('myEvent');
    
[/code]


CC BY-SA 3.0
2015-04-11T07:08:50.517
9045
2015-04-11T07:08:50.517
3066
9041
answer