prototype.jsを使ってみる 2-Event.observe

今回はEvent.observeを使ってイベントを追加する方法です。

onloadイベントを記述する際にbody要素に

<body onload="hogehoge" >

と記述したりスクリプト内に

window.onload = function(){
	hogehoge
}

と記述します。
onloadイベントは１ページに１度の記述しか認められておらず複数のonloadイベントを記述したい場合はonload用の関数を別途作成する必要があります。

prototype.jsのEvent.observeを使えばイベントを追加する事ができスクリプトの保守性が著しく向上します。

Event.observe(追加する要素,イベント,関数,段階)

追加する要素にはオブジェクトかIDを記述します。
イベントにはloadやclickなどのイベントを記述します。
関数には処理する関数を記述します。
段階にはcapture 段階でイベントを処理するならtrue, bubbling 段階で処理するならfalseを記述します。

以下のようなサンプルを用意しているので参考にしてください

javascriptに記述するコード

//load時にalert_msgを追加---------１
Event.observe(window, "load", alert_msg, false);
//load時にbtnにalert_msgを追加---------２
Event.observe(window, "load", btn_set, false);
function btn_set(){
	Event.observe("btn", "click", alert_msg, false);
}
//alert_msg
function alert_msg(){
	alert("イベントが追加されているようです")
}

(x)htmlに記述するコード

<button id="btn">クリック</button>

sample html

1の処理でloadイベントにalert_msg関数を追加してます。
２の処理でclickイベントにalert_msg関数を(loadイベントを使って)追加してます。

ちょっと欲張りすぎなコードになってしまいましたが、とても便利です。

関連エントリー

script.aculo.usでHTML Slidyを改造
一番簡単な画像置換の方法-imageReplace.js-
アルファ画像を扱うalphafilter.jsライブラリ
prototype.jsを使ってみる 3-getElementById()の省略
prototype.jsを使ってみる 1

スポンサードリンク

«関連するエントリーを表示する方法 | メイン | Amazon おまかせリンク(TM) ベータ版を使ってみる»