イベントハンドラをHTMLから分離する
基本サンプル
1: インラインのonclickイベントハンドラ
2: スクリプトでonclickハンドラをセットする1
3: スクリプトでonclickハンドラをセットする2
4: onloadごとonclickをHTMLから切り離す
5: thisを取得する
6: 引数を使う
7: 複数のonclickハンドラをfor文でセットする
- 5: thisを取得する
(*このサンプルは他のサンプルと共存できないので上記リンク参照)
<script> <!-- //ページ構築後にしか設定できません window.onload = function ini(){ //要素test5へonclickイベントをセットする document.form5.test5.onclick = function (){ alert('この要素の名前は' + this.name + 'です') } } //--> </script> <body> <form name = "form5"> <input type = "button" name = "test5" value = "クリックしてね"> </form>thisキーワードはHTMLのカレントオブジェクト、つまり今いる場所を教えてくれる便利なものです。 たとえば<input name="a" onclick="alert(this.name)">ならクリックして現れるダイアログには「a」と 表示されます。
そして、上記の通りHTMLから切り離されたイベントハンドラの関数内でもthisキーワードは有効です。
でも、ふと、引数はどうするの？と思った方は次をご覧ください。
- 6: 引数を使う
(*このサンプルは他のサンプルと共存できないので上記リンク参照)
<script> <!-- //ページ構築後にしか設定できません window.onload = function ini(){ //要素test6へonclickイベントをセットする document.form6.test6.onclick = function (){ funcTest6( 'テスト' , 'です。') } } //テスト用関数 function funcTest6(arg1,arg2){ alert( '引数1 : ' +arg1 + ' / 引数2 : '+ arg2 ) } //--> </script> <body> <form name = "form6"> <input type = "button" name = "test6" value = "クリックしてね"> </form>関数を別に用意すればOKです。
- 7: 複数のonclickハンドラをfor文でセットする
(*このサンプルは他のサンプルと共存できないので上記リンク参照)
<script> <!-- //ページ構築後にしか設定できません window.onload = function ini(){ for( i = 0 ; i < 3 ; i++ ){ document.forms["form7"].elements["test7"+i].onclick = function (){document.forms["フォーム名"].elements["エレメント名"]の構文を利用して for文で回しています。
alert('この要素の名前は' + this.name + 'です')
} } } //--> </script> <body> <form name = "form7"> <input type = "button" name = "test70" value = "クリックしてね"> <input type = "button" name = "test71" value = "クリックしてね"> <input type = "button" name = "test72" value = "クリックしてね"> </form>
*ちなみに「"test7"+i」は文字列の連結になりますので"test70"や"test71"となります。 もし足し算にしたければ「"test"+(7+i)」などのように書けば"test8"といった結果になります。
このように、たくさんINPUT要素があっても、要素内にひとつもスクリプトを記述することなくイベントをセットすることができました。次回もこの周辺のサンプルを例示してみますのでお楽しみに。。。
