“時計アプリ”で見るWindows Liveガジェットのインパクト：Windows Liveが魅せる次世代マッシュアップ（2/5 ページ）

[大澤文孝，ITmedia]

　リスト2では、初期化の際のinitializeメソッド内で、次のようにonclickイベントをアタッチしている。

【initializeメソッドの処理】
m_btn = m_el.children['btn'];
m_btn.attachEvent("onclick", OnClick);

　これにより、onclickイベントが発生したとき――すなわち［設定］ボタンがクリックされたとき――には、OnClick関数が呼び出されるようになる（OnClick関数の実装は、すぐあとに示す）。

　イベントをアタッチしたら、終了前には、デタッチする必要がある。これも決まりだ。この処理は、一般に、Liveガジェットが破棄される寸前に呼び出されるdisposeメソッド内で行う。

【disposeメソッドの処理】
m_btn.detachEvent("onclick", OnClick);
m_btn = null;

　このように、Liveガジェットでは「attachEventでアタッチし、detachEventでデタッチする」という方法を使い、イベントを処理する関数を設定していくことになる。

　attachEventメソッドは、複数回呼び出しても構わない。つまり、あるイベントに対応するイベント処理関数を複数個設定できるということを意味する。

$()で値の取得や設定もできる

　OnClick関数では、次のようにテキストボックスに入力されたテキストを取得し、それをdivタグ要素へと設定している。この結果、画面1に示したように、入力されたテキストが、画面上にオウム返しされるというわけだ。

function OnClick()
{
  // 入力されたテキストを取得し、divタグ要素へと設定する
  var textElement = m_el.children['mytextbox'];
  var divResult = m_el.children['result'];
  divResult.innerText = textElement.value;
}

　ここでは、Liveガジェットの描画域を示す要素のchildrenプロパティを使って、子要素を取得するという方法をとった。

　しかし、次のように「$('要素のid名')」という、prototype.jsに似た構文を使うこともできる。

$('result').innerText = $('mytextbox').value;

　この構文は、Live.comのフレームワーク――より正確に言えば、ASP.NET AJAX――によって提供されるものだ。