ウィジェットのイベント処理
ウィジェットには固有のイベントが定義されていて、ウィジェットが特定の状態（ボタンが押された、ペインが開いた等）になったとき呼び出されます。 どのようなイベントが定義されているのかはAPIドキュメントに記述されています。 たとえばdijit.form.Buttonウィジェットの場合はonClick, onMouseDown, onShowなどが定義されています。
あるイベントが発生したときに処理を行いたい場合、イベント・ハンドラーの書き方にはいくつかの方法があります。
拡張scriptタグによる静的記述
前節の静的な手法でHTML内にウィジェットを配置したとき、ウィジェット定義の内部に次のように<script>タグを記述することができます。 type属性には"dojo/connect"または"dojo/method"を指定し、event属性には対象にするイベントを指定します。
リスト5. <script>タグによるウィジェットへのイベント・ハンドラーの記述
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットへのイベント・ハンドラーの記述</title>
<style>
@import url("../dojo-release-1.5.0/dojo/resources/dojo.css");
@import url("../dojo-release-1.5.0/dijit/themes/claro/claro.css");
</style>
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parser"); // DojoがHTMLをパースするのに必要
dojo.require("dijit.form.Button");
</script>
</head>
<body class="claro">
<div id="button1" dojoType="dijit.form.Button">dojo/connect
<script type="dojo/connect" event="onClick">
// type="dojo/connect"の場合、ウィジェットのイベントを表すメソッドにdojo.connect()で処理を追加するのと等価
alert('Clicked!');
</script>
</div>
<div id="button2" dojoType="dijit.form.Button">dojo/method
<script type="dojo/method" event="onClick">
// type="dojo/method"の場合、ウィジェットのイベントを表すメソッドを置き換える （関数を代入するのと等価）
alert('Clicked!');
</script>
</div>
</body>
</html>
処理内容が簡潔な場合に利用するとよいでしょう。
イベント・ハンドラーへの代入またはdojo.connect()
直前の例と同等なイベント処理をJavaScriptコードからセットする場合、次のように書くことができます。
リスト6. <script>タグによるウィジェットへのイベント・ハンドラーの記述
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ウィジェットのイベント・ハンドラーの記述（2）</title>
<style>
@import url("../dojo-release-1.5.0/dojo/resources/dojo.css");
@import url("../dojo-release-1.5.0/dijit/themes/claro/claro.css");
</style>
<script type="text/javascript" src="../dojo-release-1.5.0/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.parse"); // DojoがHTMLをパースするのに必要
dojo.require("dijit.form.Button");
function onButtonClick(event) {
alert("Clicked!");
}
var handler = null;
dojo.addOnLoad(function() {
handler = dojo.connect(dijit.byId("button1"), "onClick", window, "onButtonClick");
});
dojo.addOnUnload(function(){
dojo.disconnect(handler);
});
</script>
</head>
<body class="claro">
<div id="button1" dojoType="dijit.form.Button">dojo.connect()</div>
<div id="button2" dojoType="dijit.form.Button" onClick="onButtonClick">イベント・ハンドラーの代入</div>
<!-- コード中で dijit.byId("button2").onClick = onButtonClick; としてもよい -->
</body>
</html>
コードからウィジェットのイベント・ハンドラーをセットする場合、セットするタイミングや処理内容を柔軟に変えることができます。
