Dojoが提供する強力なイベント処理API

次に紹介するのは、Dojoが持つ強力なイベント処理APIだ。Ajaxのプログラミングは、UIイベントやネットワークイベントなど、さまざまなイベント処理のコードを記述する必要がある。これから紹介するDojoのAPIを使用すると、非常にクリーンなコードでそうしたイベント処理を実現することができる。

dojo.connect()と関連API

Dojoのイベント処理で中心になるのが、以下のdojo.connect()メソッドだ。

dojo.connect(target, event, context, method)

引数の意味は以下の通り。

  • target : イベント処理のターゲットとなるオブジェクト。nullを指定するとwindowオブジェクトとなる
  • event : イベントハンドラの接続先を文字列で指定する
  • context : method実行中のthisコンテキスト
  • method : イベントが発生した際呼び出されるメソッドを、関数名を表す文字列もしくは関数オブジェクトで渡す

また、三番目の引数contextを省略して、ここにmethodを指定することもできる。以下の例を見てほしい。

 var button = dojo.byId("submitButton");

 // ボタンのonclickイベントを捕捉する
 dojo.connect(button, "onclick", null, function() {
   …
 });

 // 三番目の引数を省略
 dojo.connect(button, "onclick", function() {
   ...
 });

dojo.connect()が強力なのは、あらゆるメソッド呼び出しに対してハンドラを接続できることだ。例えば以下のようなコードは、window.alert()メソッドが呼び出されたときに、同時にコンソールにデバッグログを出力する。

 // window.alert()にイベントハンドラを接続する
 dojo.connect(null, "alert", null, function(msg) {
   console.debug("アラートメッセージ:" + msg);
 });

また、dojo.connect()が返した戻り値を指定し、dojo.disconnect()を呼び出すことで、登録したイベントハンドラを除去することもできる。

 var connection = dojo.connect(...);

 dojo.disconnect(connection);

Webページのイベントを捕捉

Webページの読み込み完了や、現在のページから移動するときには、body.onload()やbody.onunload()といったイベントを捕捉するのが普通だ。

Dojoを使用する場合は、こうしたイベントの捕捉には以下のメソッドを使用した方が良い。

dojo.addOnLoad(thisObj, funcOrFuncName), dojo.addOnUnLoad(thisObj, funcOrFuncName)

どちらも、最初の引数にはイベントハンドラ内で使用するthisオブジェクト、二番目の引数には関数オブジェクトか関数の名称を文字列で指定する。最初の引数は省略可能だ。