詳解! Dojo Toolkit 1.0(Dijit編) - ウィジェットプログラミングのツボ

このサンプルは、ボタンをクリックされるとアラートを表示する。こうしたイベント処理も、マークアップを用いて定義することが可能だ。 先ほどのサンプルの、ボタンウィジェットを貼り付けている部分を、以下のように修正しても動作することを確認してみてほしい。

      <div id="button" dojoType="dijit.form.Button" label="クリックして!">
        <!-- onClickイベントの処理 -->
        <script type="dojo/connect" event="onClick" args="ev">
          alert("こんにちは! ボタンのID:" + ev.target.id);
        </script>
      </div>

ボタン内部の<script>タグに、onClickイベントの処理ロジックが記述されている。このような構文はDojo固有のものだ。

この仕組みを利用するためのルールは以下の通り。

Dijitウィジェット内でしか使用できない

dojoTypeを用いて定義されたUIウィジェット内でしか、この仕組みは利用できない

`<script>`タグの`type`属性に「`dojo/connect`」を使用する

これは、先ほどのコードを見ておわかりの通り。Dojoのサンプルなどでは、「dojo/method」と言う記述も見かけるかもしれない。それについては後述。

`<script>`タグの`event`属性と`args`属性を定義し、処理を記述する

これも見ておわかりの通りだ。`event`属性には処理対象となるイベントの名称、`args`属性にはハンドラに渡される引数をコード内で使用するための名称を指定する。

        <script type="dojo/connect" event="onClick" args="ev">
          alert("こんにちは! ボタンのID:" + ev.target.id);
        </script>

イベントハンドラに渡される引数を利用しないなら、`args`属性は省略してもよい。また引数が複数あるなら、`args`属性に引数の名前をカンマ区切りで指定する (例: `args="arg0, arg1"`)。

こうして定義した`<script>`タグ内に、直接イベント処理のコードを記述することができる。ここでは`alert()`を表示しているだけだ。

ここに記述したコードはメソッドの本文として扱われるため、`return`文などを記述することもできる。