イベントの伝播を止める　stopPropagation( )

内側のdivは、外側のdivに含まれているため、内側のdivにセットされたイベント（今回は背景色を変える）を実行すると
外側のdivの分まで実行されてしまう。それを防ぐため、内側のdivにイベントの伝播を防ぐメソッドを実行して内側がクリックされても外側が変わらないようにする。

[ソースコード]

<script type="text/JavaScript">
window.addEventListener("load" , changeBgColor);


function changeBgColor(){
	var outer = document.getElementById('out');
	outer.addEventListener("click" , changeOut);

	var inner = document.getElementById('in');
	inner.addEventListener("click" , changeIn);
}

function changeOut(evt){
	var outer = document.getElementById('out');
	outer.style.backgroundColor = "#ff0000";
}

function changeIn(evt){
	var inner = document.getElementById('in');
	inner.style.backgroundColor = "green";
	evt.stopPropagation();
}
</script>

インデックスにもどる