読み込み終了後実行

読み込み終了後すぐにイベントハンドラを設定したい

いままでの例で示したように閲覧者の操作でイベントハンドラを設定するよりも、ページの読み込みと同時に設定したいという場合が多いはずです。

スクリプトでイベントハンドラを設定することで、イベントハンドラを本文中に書き込む手間を省き、スクリプト部分と本文をより分離した形で書けるからです。

読み込み終了後すぐにイベントハンドラを設定するスクリプトを実行する方法はいくつかあります。

1.直接function()を記述する
window.onload = function(){
   実行内容
}
2.実行するfunction名だけを記述する
function ファンクション名(){ 
   実行内容
}
window.onload = ファンクション名;
3.複数のfunctionを実行したい時
window.onload = function(){ 
   ファンクション名1();
   ファンクション名2();
}

1.直接function()を記述する

前のページで紹介した「クリックした画像を入れ替える」スクリプトであるsetevent03()と同じことをページの読み込み後すぐに行うスクリプトです。

//ボタンにするスクリプト(読み込み後すぐに自動実行)
window.onload = function(){ 
   var elmev03 = document.getElementById("ev03");
   var imgs = elmev03.getElementsByTagName("img");
   for (var i=0;imgs.length>i;i++){
       imgs[i].setAttribute("onclick","changeimg(this)"); 
   }
}

もちろん、これはイベントハンドラを取り付けるだけですから、クリックした時に実行されるスクリプトは別に書いておく必要があります。

//画像を入れ替えるスクリプト
function changeimg(koko){
   koko.src="images/red.png";
}

window.onloadはページがすべて読み込まれた時に発生するイベントです。スクリプト内ではev03というidやimgタグなどを読んでいますが、ページが不完全だと正しい結果が得られないのですべて読み込まれてから実行しなければなりません。

このfunctionは普通のfunctionと違い、名前がありません。functionがここで作られて(定義されて)すぐに実行されるという特殊な書き方がなされています。「無名ファンクション」と呼ばれることがあります。

2.実行するfunction名だけを記述する

これも前のページで紹介した「クリックした画像を入れ替える」スクリプトであるsetevent03()と同じことをページの読み込み後すぐに行うスクリプトです。

setevent03()はまったく同じでそのまま。functionの外に window.onload = setevent3; を書き加えるだけです。

//ボタンにするスクリプト(読み込み後すぐに自動実行)
function setevent03(){ 
   var elmev03 = document.getElementById("ev03");
   var imgs = elmev03.getElementsByTagName("img");
   for (var i=0;imgs.length>i;i++){
       imgs[i].setAttribute("onclick","changeimg(this)"); 
   }
}

window.onload = setevent03;

このsetevent03には ( ) を書きません。

3.複数のfunctionを実行したい時

たとえばsetevent03()とsetevent04()を実行したい時には、次のようにします。

1.のfunction()内に直接個々の命令を書かずに実行するfunction名を書いたというものです。一番柔軟で特殊なお約束がないので覚えるならこれを1つだけ覚えておくとよいでしょう。

//ボタンにするスクリプト(読み込み後すぐに自動実行)
window.onload = function(){ 
   setevent03();
   setevent04();
}

この書き方だけ引数を使うことができます。

//ボタンにするスクリプト(読み込み後すぐに自動実行)
window.onload = function(){ 
   setevent03();
   nanika1('hoge');
   nanika2(1,2);
}

閲覧者が操作するfunctionと同じスクリプトを引数を変えて使いまわすというときには便利です。

1.2.の方法では引数を使うことができませんが、読み込みと同時の実行の場合に引数が必要なことはほとんどありません。

4.bodyタグに書き込む

お勧めしません。タグの中に onclick= などとイベントハンドラを書かなくても済むようにしているのに、ここで bodyタグに onload= と書くのは一貫性に欠けます。ただ、昔に普及した方法なので紹介するだけしておきます。

<!-- 昔の書き方 -->
<body onload="setevent04()">

もちろん function setevent04() というスクリプトが別にあることは言うまでもありません。

課題 ファイル名 onload.html

イベントハンドラをスクリプトでの課題で作った event.html は、イベントハンドラを閲覧者が操作して取り付ける仕組みのページでした。

これを元にして、読み込み終了後すぐにイベントハンドラを自動で設定するページを作りなさい。

index.htmlからは「onload」という名前のリンクから行けるようにすること。


ウェブページ(Jan.2011)
聖愛中学高等学校
http://www.seiai.ed.jp/