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

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

基本サンプル

動作ブラウザ

win				mac				linux
n7	m1	e6	o7	n7	m1	e5	s1	n7	m1	k3
○	○	○	○	○	○	○	○	○	○	○

*n4でも動作します。

最近は、HTMLとデザイン(.css)を分離するということがわりと一般的に行われるようになってきました。大規模なページでなくても、たとえば、ブログを作っていればそのツールは最初からHTML以外の分離が前提で作られていたりします。

そこで、ここではCSSだけではなく、スクリプトを分離することについて考えてみます。スクリプトの分離といえば.js外部ファイルを利用するという手がまず思い浮かびますが、今回は、インラインのイベントハンドラをHTMLから切り離す方法です。

HTMLとそれ以外の要素を分離するメリットは、一般的にはソースが整理されることに関する事柄です。もちろん、短いソースの場合は分離するためのオーバーヘッドが割りに合わないという場合もありますが、何度も使う処理がある場合などには、見た目がシンプルでわかりやすくなることにより、メンテナンス性が高まり、ミスを減らすことなども期待できます。

* 外部ファイルについては以前のJavaScript Tips .js外部ファイル編で触れていますので、そちらをご覧ください。

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

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

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

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

5: thisを取得する

6: 引数を使う

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

イベントハンドラといえば、クリックした時に起動するonclickやページが読み込まれたときのonload、カーソルフォーカスに反応するonfocusやonmouseoverなどいろいろなものがあります。

これらは、主に<input>タグや<divタグなどのHTMLの各要素内に記述されることが一般的ですが HTMLから切り離してスクリプト側からセットする方法もあります。次にそれらのいろいろな方法を見てみましょう。

　* 下記のサンプルは厳密に言えばHTMLであるSCRIPTタグ内にスクリプトを切り離しただけで、 HTMLから完全に切り離したとまでは言えません。完全分離のためには、たとえば、.js外部ファイル化する必要がありますが、今回の趣旨は「インラインからの分離」です。「HTMLから切り離し」などの言い回しは、ここまでできればほとんど切り離したも同然という意味で記述していることをご了承ください。

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

<form name = "form1">
  <input type    = "button"
         name    = "test1"
         onclick = "alert('普通のイベントハンドラです')">
</form>

一般的なonclickイベントハンドラです。

2: スクリプトでonclickハンドラをセットする1
(*このサンプルは他のサンプルと共存できないので上記リンク参照)

<script>
<!--

  function ini2(){     document.form2.test2.onclick = testFnc2
  } 
  
  function testFnc2(){
    alert('onloadをBODY要素に書いてみます')
  }

//-->
</script>
<body onload = "ini2()">

<form name = "form2">
  <input type    = "button"
         name      = "test2"
         value   = "クリックしてね">
</form>

とりあえず、onclickをinputタグから切り離してみました。これは、関数testFnc2を省略して次のような書き方もできます。

3: スクリプトでonclickハンドラをセットする2
(*このサンプルは他のサンプルと共存できないので上記リンク参照)
```
<script>

</script>
<body onload = "ini3()">

<form name = "form3">
  <input type    = "button"
         name      = "test3"
         value   = "クリックしてね">
</form>
```
サンプル2も3も、onclickをinputタグから切り離していますが、onclickイベントをセットするためのonloadイベントをBODYタグへ書いてしまっています。

つまりこれでは、HTMLからスクリプトを切り離すことができていません。

なぜonloadイベントで起動しているかといいますと、HTMLの要素へイベントをセットするにはページ構築後に設定しなければならないからです。ようは、読み込みが終了していない、構築されていないタグにイベントをセットするのは無理(^^;だからです。

そこで、次にBODYタグのonloadイベントハンドラも切り離す方法をみてみます。

<script>
<!--

  //ページ構築後にしか設定できません
  window.onload = function ini(){

    //要素test4へonclickイベントをセットする     document.form4.test4.onclick = function (){       alert('HTMLから切り離されました')     }
  
  } 
  
//-->
</script>


<form name = "form4">
  <input type    = "button"
         name    = "test4"
         value   = "クリックしてね">
</form>