6

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

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

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();
2
  • $.get()の戻りをスコープ外の変数にコピーして、それに好きなだけdone()をチェインさせればいいのではないでしょうか。 $.Deferredはいくらでもdoneを呼ぶことができますよ。
    – sken2
    2015年4月11日 4:47
  • 上記は質問の例コードかつ簡易的なものです。誤解を生んでしまいましたが、非同期をうまいこと処理したいというよりはdataLoaderのモジュール性を高めるためにイベントリスンできる状態に作っておきたいというのが質問の本質です。
    – hojo
    2015年4月11日 4:59

2 件の回答 2

5

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

var o = $({});
o.on('myEvent', function() {
  console.log('myEvent!');
});
o.trigger('myEvent');
2
  • なるほど!固定概念にとらわれていました。ありがとうございましたm(_ _)m
    – hojo
    2015年4月11日 7:53
  • jQueryに依存しない形で実装するには、やはり自前で管理する方法がベターでしょうか?
    – tutinoco
    2015年4月11日 8:50
3

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

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);
        }
    }
};
1
  • やっぱりそうするしか無いですかね
    – hojo
    2015年4月11日 3:59

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。