イベントハンドラの取付

イベントハンドラ

タグ内に書く属性で、onclick="script" などをイベントハンドラといいます。これはjavascriptの決まりではなく、html,xhtmlで定められたものです。この属性の値(上記のscriptにあたる)には直接javascriptの文(ステートメント)や文をひとまとまりにしたものであるfunctionの名前を書くことができます。このテキストでも次の様に使ってきました。

<p>
<span onclick="showimg1()">img1</span>　
<span onclick="showimg2()">img2</span>　
<span onclick="showimg3()">img3</span>
</p>
<p>
<img src="images/img1.png" id="area1" alt="説明図">
</p>

イベントハンドラもスクリプトでつくる

このイベントハンドラも src, class の様に属性ですから、setAttribute() を使ってDOMで設定できるはずです。たとえば span タグにイベントハンドラを設定するようにするならソースには次の様に書いておくだけで済みます。id="ev01" は他にも spanタグがあるような場合を想定して置いていますが、場合によってはこれも不要です。。

<p id="ev01">
<span>img1</span>　
<span>img2</span>　
<span>img3</span>
</p>
<p>
<img src="images/img1.png" id="area1" alt="説明図">
</p>

これを実際に表示したものが次です。

img1　 img2　 img3

初めはボタンになっていません。以下のボタンにするという部分をクリックすることで、ボタンになります。ボタンでなくするでもどります。

ボタンにするボタンでなくする

function setevent01(){
   var elmev01 = document.getElementById("ev01");
   var spans = elmev01.getElementsByTagName("span");
   spans[0].setAttribute("onclick","showimg1()");
   spans[1].setAttribute("onclick","showimg2()");
   spans[2].setAttribute("onclick","showimg3()");
   spans[0].setAttribute("class","btn");
   spans[1].setAttribute("class","btn");
   spans[2].setAttribute("class","btn");
}
function resetevent01(){
   var elmev01 = document.getElementById("ev01");
   var spans = elmev01.getElementsByTagName("span");
   spans[0].removeAttribute("onclick");
   spans[1].removeAttribute("onclick");
   spans[2].removeAttribute("onclick");
   spans[0].removeAttribute("class");
   spans[1].removeAttribute("class");
   spans[2].removeAttribute("class");
}

setevent01() がイベントハンドラを設定するスクリプトです。同時にボタンになったことがわかるようにclass属性も指定して、css でボタンに見えるようにしています。普通は window.onload でページ表示と同時に設定することが多いので class属性を同時に変更する必要はまずないでしょう。

resetevent01() イベントハンドラを削除するスクリプトです。ページ表示と同時に設定するのであればこれも必要となることはないでしょう。removeAttribute()を使っていますが、setAttribute("onclick","")でも目的は達成されます。

もちろん設定したイベントハンドラが動作するためにはクリックで切替にあるようなスクリプトが必要です。以下に再掲しますがもちろん setAttribute() を使うことも可能です。

function showimg1(){
     document.getElementById("area1").src = "images/img1.png";
}
function showimg2(){
     document.getElementById("area1").src = "images/img2.png";
}
function showimg3(){
     document.getElementById("area1").src = "images/img3.png";
}

イベントハンドラをスクリプトで作るメリット

ユーザーのアクションによりイベントハンドラとなるような機能を作れる。
body 部分からスクリプトを分離できる。css と同様に別ファイルにして流用したり作成を分担できる。
一ヶ所にまとめて書けるので、作成が楽になる。
たくさん書くときにスクリプトの繰り返し機能を使える。

繰り返しを使う例

0123456789

ボタンにするボタンでなくする

//ボタンにするプログラム
function setevent02(){ 
    var elmev02 = document.getElementById("ev02");
    var spans = elmev02.getElementsByTagName("span");
    var i;
    for (i=0;spans.length>i;i++){
        spans[i].setAttribute("onmouseover","showimgn('"+i+"')"); 
        spans[i].setAttribute("class","btn"); 
    }
}
//ボタンでなくするプログラム
function resetevent02(){
    var elmev02 = document.getElementById("ev02");
    var spans = elmev02.getElementsByTagName("span");
    var i;
    for (i=0;spans.length>i;i++){
       spans[i].removeAttribute("onmouseover");
       spans[i].removeAttribute("class");
    }
}
//マウスが重なると対応する画像に変えるプログラム
function showimgn(number){
    var a2 = document.getElementById("area2");
    a2.setAttribute("src","images/n"+number+".png");
}

課題ファイル名 event.html

クリックで切替の課題で4つの画像をクリックで切り替えるページ「click.html」を作りました。この画像を切り替える4つのボタンのイベントハンドラをjavascriptで取り付けたり、外してボタンでなくしたりする仕組みのあるページをつくりなさい。

まず画像は「click.html」を作ったときに用意されているはずですが、画像がなければクリックで切替から「名前をつけて画像を保存」します。4つ目の画像は自分で作ります。すべていつものimagesフォルダに入れます。
DOMの課題に共通の作成例を参考に「event.html」というファイルを作ります。

body部内にボタンにすべきところと、変化させる画像の場所を書き加えます。

<p id="ev01">
<span>img1</span>
<span>img2</span>
<span>img3</span>
<span>img4</span>
</p>
<p>
<img src="images/img1.png" id="area1" alt="説明図">
</p>
<p>
<span onclick="setevent()" class="btn">4つをボタンにする</span>
<span onclick="resetevent()" class="btn">4つをボタンでなくする</span>
</p>

headのscriptタグの中に、次を加えます。

function setevent(){
   var elmev01 = document.getElementById("ev01");
   var spans = elmev01.getElementsByTagName("span");
   spans[0].setAttribute("onclick","chgimg('images/img1.png')");
   spans[1].setAttribute("onclick","chgimg('images/img2.png')");
   spans[2].setAttribute("onclick","chgimg('images/img3.png')");
   spans[3].setAttribute("onclick","chgimg('images/img4.png')");
   spans[0].setAttribute("class","btn");
   spans[1].setAttribute("class","btn");
   spans[2].setAttribute("class","btn");
   spans[3].setAttribute("class","btn");
}
function resetevent(){
   var elmev01 = document.getElementById("ev01");
   var spans = elmev01.getElementsByTagName("span");
   spans[0].removeAttribute("onclick");
   spans[1].removeAttribute("onclick");
   spans[2].removeAttribute("onclick");
   spans[3].removeAttribute("onclick");
   spans[0].removeAttribute("class");
   spans[1].removeAttribute("class");
   spans[2].removeAttribute("class");
   spans[3].removeAttribute("class");
}
function chgimg(imgname){
     document.getElementById("area1").src = imgname;
}

headのstyleタグの中に、次も加えます。

span.btn{
  border:outset;
  background:#cccccc;
  margin:4px;
  padding:2px 4px 2px 4px;
  cursor: pointer;
}
span.btn:active{
  border:inset;
}

index.htmlへ行くリンクがあることを確認する。なければbody部に次の記述を加える。
```
<p><a href="index.html">目次</a></p>
```
body部の不要なものを消したり、必要なものを付け加えたりして整える。

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

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

イベントハンドラの取付