onloadイベントの特徴
- onloadイベントは1ページに1度の記述しか認められていない。
- 1つのページ内でonloadイベントが重複した場合、後から記述されたものによって上書きされてしまう。
- onloadイベントを記述する方法は2つある。
・HTMLのBODY要素に記述する方法。
・スクリプト内に記述する方法。 - 複数のonloadイベントを記述する場合は2つある。
・onload用の関数を用意する方法。
・prototype.jsのEvent.observeをもちいて、onloadイベントを追加する方法。
HTMLのBODY要素に記述する場合
<body onload="処理を記述">
スクリプト内に記述する場合
window.onload = function example () {
//処理を記述
}
複数のonloadイベントを記述する場合
この場合、onload用の関数を別途作成する必要がある。
window.onload = init;
function init (){
example1();
example2();
example3();
}
function example1 () {
//処理を記述
}
function example2 () {
//処理を記述
}
function example3 () {
//処理を記述
}
prototype.jsのEvent.observeをもちいて、onloadイベントを追加する方法
Event.observe(追加する要素, イベント, 関数, 段階);
- 追加する要素：オブジェクトかIDを記述。
- イベント：loadやclickなどのイベントを記述。
- 関数：処理する関数を記述。
- 段階：capture段階でイベントを処理する場合 true、bubbling段階で処理する場合 false を記述。
■JavaScript内の記述例
Event.observe(window, "load", example1, false);
Event.observe("testBtn", "click", example2, false);
function example1 () {
Event.ovserve("testBtn", "click", example2, false);
}
function example2 () {
//処理
}
■HTMLのBODYタグ内の記述例
<button id="testBtn">クリックしてください</button>
参考URL
引用させていただきました。ありがとうございます。
こちらもあわせてどうぞ
