イベントハンドラのthisキーワード

thisキーワードを使う場合

クリックした画像を入れ替える場合、thisキーワードが便利です。

ボタンにする

//ボタンにするスクリプト
function setevent03(){ 
    var elmev03 = document.getElementById("ev03");
    var imgs = elmev03.getElementsByTagName("img");
    for (var i=0;imgs.length>i;i++){
        imgs[i].setAttribute("onclick","changeimg(this)"); 
    }
}
//画像を入れ替えるスクリプト
function changeimg(koko){
   koko.src="images/red.png";
}

全部のボタンにonclick=changeimg(this)と同じことを書いておくだけです。

クリックされるとこのthisの部分にクリックされた位置の情報が入ってchangeimg()に行きます。

changeimg()ではそれをkokoという変数で受け、koko.srcでクリックされた要素の画像を指定できるのです。

thisキーワードを使わない場合

使わなくてもできないことはありませんが、長くなったり分かりにくくなったりします。

上と同じことをthisキーワードを使わないでやろうとすると、次の様になります。

ボタンにする

//ボタンにするスクリプト
function setevent04(){ 
    var elmev04 = document.getElementById("ev04");
    var imgs = elmev04.getElementsByTagName("img");
    for (var i=0;imgs.length>i;i++){
        imgs[i].setAttribute("onclick","changeimg(" + i + ")"); 
    }
}
//画像を入れ替えるスクリプト
function changeimg(number){
    var elmev04 = document.getElementById("ev04");
    var imgs = elmev04.getElementsByTagName("img");
    imgs[number].src="images/red.png";
}

setevent04()では、imgタグに onclick=changeimg(0), onclick=changeimg(1),...という属性を書き加えます。

function changeimg(number) のnumberで渡される値を数値として取扱い、imgタグの number番目であるimgs[number]のsrcを書き換えています。