今更ながら jQuery の trigger の魅力について語らせてもらう

ども、@kimihom です。

今更ながら jQuery で搭載されている機能の紹介。その名も、trigger。これはあまりメジャーではないけど、クールな Web アプリケーションを作りたい場合にかなりよく使う便利なメソッドだ。

trigger って何？

trigger は主に2つの使い方で使われる。それぞれの用途について紹介しよう。

既存イベントを発生させるパターン

trigger とは、対象オブジェクトに対し、手動でイベントを発生させるメソッドだ。例えば、clickイベントってのはブラウザでマウスでクリックしたら起こせるイベントだけど、JavaScript からそのclick イベントを発生させたい場合に triggerが使える。

$(function() {
    $(document).on("click", "#header .tab", function() {
        console.log("clicked!!");
    });
    
    $(document).on("keypress", function(e) {
        if (e.which == '13') {
             $("#header .tab").trigger("click");
        }
    });
});

一つ目のサンプルはこんな感じ。例えば他のイベント(今回はエンターキーを押した)タイミングで、JavaScript で指定要素をクリックしたことにしたい場合に trigger が使える。

カスタムイベントを発生させるパターン

$(document).on における click イベントってのはブラウザで定義されているイベントだが、そうじゃなくて自分で好きにイベントを定義することができる。 Android で言えば EventBus、iOS で言えばNSNotificationCenterのような通知基盤がマサの jQuery の trigger を使うことで実現できてしまうのだ！ Rails で言えば、ajax:successとかそういうの。あれも jquery-rails が作ったカスタムイベントの一つだ。

さて、サンプル。

$(function() {
    $(document).on("custom:fired", function() {
        console.log("clicked!!");
    });

    // どこかのコード
    $(document).trigger("custom:fired");
});

今回は document にカスタムイベント custom:fired という適当なイベントを登録したけど、DOMのどこかの要素にカスタムイベントを定義してもOKだ。これにより、jQuery でも一種のオブサーバーパターンを実装することが可能である。何かの変更を受け取る custom:fired のようなイベントをリスナとして定義しておき、各地あらゆるイベントが発生した時に、それを trigger してあげれば良いのだ。