Javascript

【Javascript】イベントハンドラをHTMLから分離する　基本サンプル

Javascript関連情報

更新日：2005年03月01日

イベントハンドラをHTMLから分離する　基本サンプル

高橋登史朗

インラインからonloadやonclickなどの基本的なイベントハンドラをHTMLから分離するJavaScriptのサンプルを紹介します。

イベントハンドラをHTMLから分離する

基本サンプル

1: インラインのonclickイベントハンドラ

2: スクリプトでonclickハンドラをセットする1

3: スクリプトでonclickハンドラをセットする2

4: onloadごとonclickをHTMLから切り離す

5: thisを取得する

6: 引数を使う

7: 複数のonclickハンドラをfor文でセットする

5: thisを取得する
(*このサンプルは他のサンプルと共存できないので上記リンク参照)
```
<script>

</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>

</script>

<body>
<form name = "form7">
  <input type    = "button"
         name    = "test70"
         value   = "クリックしてね">
  <input type    = "button"
         name    = "test71"
         value   = "クリックしてね">
  <input type    = "button"
         name    = "test72"
         value   = "クリックしてね">
</form>
```
document.forms["フォーム名"].elements["エレメント名"]の構文を利用して for文で回しています。

*ちなみに「"test7"+i」は文字列の連結になりますので"test70"や"test71"となります。もし足し算にしたければ「"test"+(7+i)」などのように書けば"test8"といった結果になります。

このように、たくさんINPUT要素があっても、要素内にひとつもスクリプトを記述することなくイベントをセットすることができました。次回もこの周辺のサンプルを例示してみますのでお楽しみに。。。

マネしたくなるアイデア住宅

住まいには、人の個性がよく現れるもの。同じ空間をどのように使うかで、雰囲気も、快適さも大きく変わってくる。ここでは、「建築家と家を建てる」ガイドの川畑博哉氏が厳選した10軒を紹介し、建築家それぞれのこだわりのポイントを紹介しよう。建築のプロたちが考え出した、マネしたくなるアイデアが満載！さぁ、いますぐチェック！