Dojo Toolkitでイベント処理

dojo javascript

この記事を書いた時点でのDojo Toolkitのバージョンは1.8.0です。
Dojo Toolkitで提供されているモジュールには、大きく分けて以下3つのものがあります。

ただし、dojo/_base/connectは古いモジュールであり、
バージョン1.7以降は、より軽量なdojo/on, dojo/topicへと機能が引き継がれています。

dojo/onモジュールによるイベントリスナーの登録

Dojo Toolkitを利用してイベント処理を行う場合、基本的にはこのdojo/onの利用だけを考えればOKです。
ボタンにイベントリスナーを登録する例を示します（サンプル）。

require([
    "dojo/dom",
    "dojo/on",
    "dojo/ready",
    "dojo/parser"
], function(dom, on, ready) {
    // ボタンがウィジェット化されるまで待つ
    ready(function() {
        // ウィジェットのclickイベントへ関数を登録
        on(btn1, "click", function() {
            alert("ボタン1がクリックされました");
        });
        // 通常のDOMノードにも同じように適用できる
        on(dom.byId("btn2"), "click", function() {
            alert("ボタン2がクリックされました");
        });
        // 返り値のremoveメソッドを実行すると、イベントリスナーを取り除ける
        var handle = on(btn1, "click", function() {
            handle.remove();
            alert("このアラートは1回だけ表示されます");
        });
    });
});

<body class="claro">
    <button data-dojo-type="dijit/form/Button" data-dojo-id="btn1">ボタン1</button>
    <button id="btn2">ボタン2</button>
</body>

ウィジェットやDOMノードを指定し、各種イベントにリスナーを登録しています。
もちろん、グローバルなJavaScript関数を定義して、DOMノードのonclick属性に結び付けることも可能ですが、
名前空間への影響などを考えると、特に規模の大きい開発などでは避けた方が無難ではないかと思います。

NodeListを経由した指定

dojo/queryによりCSSセレクタ形式で取得したDOMノード集合に対して、
直接onメソッドからイベントを指定することも可能です（サンプル）。

require([
    "dojo/dom",
    "dojo/query",
    "dojo/domReady!"
], function(dom, query) {
    var message = dom.byId("message");
    query("#siritori li").on("mouseover", function(e) {
        message.value = e.target.innerHTML;
    });
});

<body>
    <input id="message" size="40" value="カーソルをリストに合わせてください" readonly>
    <ol id="siritori">
        <li>りんご</li>
        <li>ごりら</li>
        <li>らっぱ</li>
        <li>パンツ</li>
    </ol>
</body>

dojo/topicモジュールによるpub/sub処理

こちらは、いわゆるpub/subを実装したモジュールです。
特定のメッセージが発行されたときの処理をsubscribeメソッドで予め登録しておき、
publishメソッドでメッセージと追加情報を発行します（サンプル）。

require([
    "dojo/on",
    "dojo/topic",
    "dojo/dom",
    "dojo/domReady!"
], function(on, topic, dom) {
    var message = dom.byId("message");
    // 指定したメッセージに反応し、追加情報を受け取る
    topic.subscribe("/animal/clicked", function(msg) {
        message.value = msg;
    });
    // クリックに応じてメッセージと追加情報を発行する
    on(dom.byId("dog"), "click", function() {
        topic.publish("/animal/clicked", "ワンワン！");
    });
    on(dom.byId("monkey"), "click", function() {
        topic.publish("/animal/clicked", "そのおにぎりと、この柿の種を交換しませんか？");
    });
    on(dom.byId("article"), "click", function() {
        topic.publish("/animal/clicked", "件件！");
    });
});

<body>
    <input id="message" size="40" value="クリックされた動物の鳴き声を表示します。" readonly>
    <div>
        <button id="dog">犬</button>
        <button id="monkey">猿</button>
        <button id="article">記事</button>
    </div>
</body>

なお、onの返り値と同様、subscribeの返り値もremoveメソッドで無効化できます。

参考

Events with Dojo - The Dojo Toolkit

関連記事

Dojo Toolkitの使い方
Dojo ToolkitでDOM操作
Dojo Toolkit 1.8で導入されたAuto Requireを試してみる