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

基本サンプル






  • 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 (){
    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>
    document.forms["フォーム名"].elements["エレメント名"]の構文を利用して for文で回しています。

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

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




※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。