イベントを使う

イベントの登録

イベントを登録するには以下のようにSabel.Eventクラスを使用します。
IEと他のブラウザのイベント登録方法の差異を気にせず使用することが出来ます。

テスト用ボタン

  if (window.clickEvent === undefined) {
    window.clickEvent = new Sabel.Event("smpl_id", "click", function(evt) {
      alert("クリックされました。");
    });
  }

イベントの登録を解除する場合、stop()メソッドを呼ぶだけで解除出来ます。

  window.clickEvent.stop();

また、イベントの再登録をする場合は、start()メソッドを呼ぶだけで再登録出来ます。

  window.clickEvent.start();

Sabel.Elementから登録

Sabel.get等で取得したSabel.Elementオブジェクトが存在する場合、observe()メソッドでイベントを登録する事も可能です。

テスト用ボタン

  Sabel.get("smpl_id2").observe("click", function(evt) {
    alert("クリックされました。");
  });

thisを束縛する

通常Sabel.Eventで登録したイベントが実行される時のthisはイベント対象の要素になっていますが、第5引数にthisにしたいものを指定することで、thisを他のものにすることができます。

	var smplMethod = function() {
		alert(this);
	};
	new Sabel.Event("smpl_id3", "click", smplMethod);
	new Sabel.Event("smpl_id3", "click", smplMethod, false, window);

おまけ

このページにある「上記コードを実行する」ボタンもSabel.Eventを使用して書かれています。
ソースを見てみるのも良いのではないでしょうか。

<< 戻る