<html>
<head>
<title>DOM Event</title>
<style>
#aa {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 10px;
top: 10px;
width: 1200px;
height: 600px;
}
#bb {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 1150px;
height: 760px;
}
#cc {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 1100px;
height: 520px;
}
#dd {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 1050px;
height: 480px;
}
#ee {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 1000px;
height: 440px;
}
#ff {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 950px;
height: 400px;
}
#gg {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 900px;
height: 360px;
}
#hh {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 850px;
height: 320px;
}
#ii {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 800px;
height: 280px;
}
#jj {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 750px;
height: 240px;
}
#kk {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 700px;
height: 200px;
}
#ll {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 650px;
height: 160px;
}
#mm {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 600px;
height: 120px;
}
#nn {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 550px;
height: 80px;
}
#bt {
position: absolute;
border-style:solid;
border-color:#00ff00;
left: 20px;
top: 20px;
width: 100px;
height: 30px;
}
</style>
</head>
<body>
<div id="aa">aa
<div id="bb">bb
<div id="cc">cc
<div id="dd">dd
<div id="ee">ee
<div id="ff">ff
<div id="gg">gg
<div id="hh">hh
<div id="ii">ii
<div id="jj">jj
<div id="kk">kk
<div id="ll">ll
<div id="mm">mm
<div id="nn">nn
<input type="button" id="bt" value="hello">
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
function fooaa(e)
{
//alert(e.target.parentNode.id);
alert("aa");
}
function foobb(e)
{
alert("bb");
}
function foocc(e)
{
alert("cc");
}
function foodd(e)
{
alert("dd");
}
function fooee(e)
{
alert("ee");
}
function fooff(e)
{
alert("ff");
}
function foogg(e)
{
alert("gg");
}
function foohh(e)
{
alert("hh");
}
function fooii(e)
{
alert("ii");
}
function foojj(e)
{
alert("jj");
}
function fookk(e)
{
alert("kk");
}
function fooll(e)
{
alert("ll");
}
function foomm(e)
{
alert("mm");
}
function foonn(e)
{
alert("nn");
}
function foobt(e)
{
alert("bt");
}
/*
document.getElementById("aa").addEventListener("click",fooaa,true);
document.getElementById("bb").addEventListener("click",foobb,true);
document.getElementById("cc").addEventListener("click",foocc,true);
document.getElementById("dd").addEventListener("click",foodd,true);
document.getElementById("ee").addEventListener("click",fooee,true);
document.getElementById("ff").addEventListener("click",fooff,true);
document.getElementById("gg").addEventListener("click",foogg,true);
document.getElementById("hh").addEventListener("click",foohh,true);
document.getElementById("ii").addEventListener("click",fooii,true);
document.getElementById("jj").addEventListener("click",foojj,true);
document.getElementById("kk").addEventListener("click",fookk,true);
document.getElementById("ll").addEventListener("click",fooll,true);
document.getElementById("mm").addEventListener("click",foomm,true);
document.getElementById("nn").addEventListener("click",foonn,true);
document.getElementById("bt").addEventListener("click",foobt,true);
*/
document.getElementById("aa").addEventListener("click",fooaa,false);
document.getElementById("bb").addEventListener("click",foobb,false);
document.getElementById("cc").addEventListener("click",foocc,false);
document.getElementById("dd").addEventListener("click",foodd,false);
document.getElementById("ee").addEventListener("click",fooee,false);
document.getElementById("ff").addEventListener("click",fooff,false);
document.getElementById("gg").addEventListener("click",foogg,false);
document.getElementById("hh").addEventListener("click",foohh,false);
document.getElementById("ii").addEventListener("click",fooii,false);
document.getElementById("jj").addEventListener("click",foojj,false);
document.getElementById("kk").addEventListener("click",fookk,false);
document.getElementById("ll").addEventListener("click",fooll,false);
document.getElementById("mm").addEventListener("click",foomm,false);
document.getElementById("nn").addEventListener("click",foonn,false);
document.getElementById("bt").addEventListener("click",foobt,false);
function funnn(e)
{
//e.preventDefault(); // 阻止默认事件发生
alert("nn->contextmenu");
return false;
}
function funbt(e)
{
e.preventDefault();
alert("bt->contextmenu");
return false;
}
document.getElementById("nn").addEventListener("contextmenu",funnn,false);
document.getElementById("bt").addEventListener("contextmenu",funbt,false);
</script>
</body>
</html>
切忌写成平行关系:<div id="aa">aa</div><div id="bb">bb</div>
只有在包含关系下,才能实现DOM Eevent的capture和bubble