イベントの伝達

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript"><!--
eFlag = false;
function check(evt)
{
alert(evt.target.id);
if (eFlag) evt.stopPropagation();
}
window.onload = function()
{
document.getElementById("mainContents").addEventListener("click",check,false);
document.getElementById("inner1").addEventListener("click",check,false);
document.getElementById("inner2").addEventListener("click",check,false);
}
// --></script>
</head>
<body>
<h1>イベントの伝達</h1>
<form>
<input type="button" value="イベントの伝達を許可" onClick="eFlag = false"><br>
<input type="button" value="イベントの伝達を中止" onClick="eFlag = true"><br>
</form>
<div id="mainContents">
外側のdivタグ
<div id="inner1">
内側のdivタグ
<div id="inner2">
一番内側のdivタグ
</div>
</div>
</div>
</body>
</html>
・サンプル1を実行する
・サンプル2を実行する
・サンプル3を実行する
Ajax逆引きクイックリファレンス　説明などは本書を参考にしてください。