Hello Dojo! - イベントハンドラの登録

まずは、ボタンをクリックするとアラートが表示される簡単なサンプルを作成する。

HTMLファイル - hello_dojo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Hello Dojo</title>
<script type="text/javascript" src="./js/dojo1.2/dojo/dojo.js"></script>
<script type="text/javascript">
<!--
dojo.addOnLoad
(
    function()
    {
        var helloObj = dojo.byId('hello1');
        dojo.connect(helloObj,'onclick',
            function()
            {
                alert('Hello, Dojo!')
            }
        );

        dojo.query('#hello2').connect('onclick',
            function()
            {
                alert('Hello, Dojo!')
            }
        );
    }
);
-->
</script>

</head>

<body>
    <p><input type="button" id="hello1" value="hello1"></p>
    <p><input type="button" id="hello2" value="hello2"></p>
</body>

</html>

それぞれのボタンをクリックすると「Hello, Dojo!」と表示される

Dojoでは、以下のdojo.connect()を使用してオブジェクトにイベントハンドラを登録する(Dojo API Documentaionより引用)。

dojo.connect(obj: Object|null, event: String, context: Object|null, method: String|Function, dontFix: Boolean);

主要な引数は次のとおり。

  • obj: ターゲットのオブジェクトを指定する。nullの場合はdojo.globalが適用される
  • event: イベントハンドラ名を文字列で指定する
  • context: メソッド実行中のthisコンテキストを指定。nullの場合はdojo.globalが使用される
  • method: イベントが発生したときに呼びだされる関数を指定する

ここではまずhelloObjにdojo.byId()をつかってオブジェクトを格納し、dojo.connectでonclickイベントハンドラに関数を定義している。

また「dojo.query('#hello2').connect()...」といったような記述も可能だ。複数の要素に対して一括して処理を行う場合はこちらが便利だろう。