イベントを解除する removeEventListener

ボックスをクリックすると...

幅200px 高さ25pxです。

[ソースコード]

<div id="box">ここをクリックして下さい</div>

<script type="text/JavaScript">
addEventListener("load" , Start);

function Start(){
var box = document.getElementById('box');
box.addEventListener("click" , Change);
}

/*************************************
addEventListenerで呼び出す関数(リスナー関数)
*************************************/
function Change(){
var width = box.offsetWidth; // 200px
var height = box.offsetHeight; // 25px

box.style.width = (width*2)-2 + "px"; // offsetWidthは width + padding + border
box.style.height = (height*2)-2 + "px";

/**************************
リスナー関数の中で解除
**************************/
box.removeEventListener("click" , Change); // 呼び出しつつ解除する
box.firstChild.nodeValue = "解除されました"; // firstChild.nodeValue = innerHTML
}
</script>

インデックスに戻る