読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

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

JavaScript

ども、@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 してあげれば良いのだ。

使いどき?

正直なところいろんなところで使える。 jQuery で SPA っぽいことをしていたら、使う日が必ず来るので知っておくだけでもいいと思う。

あらゆるページのイベントを集約してまとめて表示したいときとか、エクセルのようなあらゆる場所で変更が加わるけど、最終的にエクセルの=を使って関数でまとめたいとかそういう場合に一つイベントの受け皿を定義し、 trigger でカスタムイベントを発生させるとコードがすっきりする。

シンプルが故に、自分が使いたい時に使えるのが逆に怖い点かもしれない。あまりに乱用するとイベント定義とtrigger だらけになり、あっちこっち飛び回るソースコードができてしまう。それは Android の EventBus などを使った時にも同じ注意点である。

リアクティブ? それ jQuery でもできるよ。 今回の記事はそんなところ。