« Dojoインストール | トップページ | クラス/オブジェクト »

2007年3月13日 (火)

イベント割り当て

Fromなどのオブジェクトにイベント時の動作を割り当てることができる。例えば、以下のDojo widgetに対して、onClickを割り当てるときは、

<button dojoType="Button" widgetId="helloButton">Press Me</button>

以下のように、dojo.event.connectを用いる。1つ目の引数としてオブジェクト、2つ目にイベント、3つ目が割り当てる関数を指定する。これより、ボタンが押されたら、helloPressedが呼び出される。

function helloPressed(){
  dojo.debug('Hello World!');
}
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed');

Dojoのwidgetだけでなく、通常のFormオブジェクトに対しても割り当てることができる。例えば、以下のボタンに対して、

<input type="button" id="testbutton" value="ボタン">

以下のように同じdojo.event.connectを用いてイベントを割り当てられる。なぜか、Dojo 0.4.1では、'onclick'のようにcがこのときは小文字となるので注意すること。

var testButton = dojo.byId("testbutton");
dojo.event.connect(testButton, 'onclick', 'helloPressed');

o.helloPressed()のように、オブジェクトのメソッドを呼び出したいときは、3つ目の引数でオブジェクト、4つ目の引数でメソッド名を指定する。

var testButton = dojo.byId("testbutton");
dojo.event.connect(testButton, 'onclick', o, 'helloPressed');
呼び出される関数は、引数としてイベントオブジェクトを取得することもできる。
function helloPressed(event){
  dojo.debug(event.pageY);
}

var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed');

dojo.event.connet()は、HTMLの読み込みが完了してから実行されるように、HTMLのbodyのonload属性で呼び出した関数内に記述するのがよいようです。Dojoでは、dojo.addOnLoad()でonloadで呼ばれる関数を指定することもできる。

ここでは、1つのオブジェクトに1つのイベントだけを割り当てているが、1つのオブジェクトに対してdojo.event.connect()を複数記述して、複数のイベントを割り当てることも出来る。このとき、dojo.event.connect()で指定した順番に呼ばれる。

dojo.event.disconnect()により、割り当てたイベントを削除することもできる。dojo.event.disconnect()の引数はdojo.event.connect()と同じものを指定する。

« Dojoインストール | トップページ | クラス/オブジェクト »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/5672779

この記事へのトラックバック一覧です: イベント割り当て:

« Dojoインストール | トップページ | クラス/オブジェクト »