タグ内に書く属性で、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"; }
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"); }
クリックで切替の課題で4つの画像をクリックで切り替えるページ「click.html」を作りました。この画像を切り替える4つのボタンのイベントハンドラをjavascriptで 取り付けたり、外してボタンでなくしたりする仕組みのあるページをつくりなさい。
<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>
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; }
span.btn{ border:outset; background:#cccccc; margin:4px; padding:2px 4px 2px 4px; cursor: pointer; } span.btn:active{ border:inset; }
<p><a href="index.html">目次</a></p>
index.htmlからは「eventの生成」という名前のリンクから行けるようにすること。