DOM事件传播
贴代码 test1.html
<div id="div1" style="height:130px;border:1px solid red;width:130px;">
<div id="div2" style="height:120px;border:1px solid green;width:120px;margin:5px;">
<p id="p1">sdfsdfsdfsdfsf</p>
</div>
</div>
页面显示效果:
dom2Event.js代码:
function $(id){
return document.getElementById(id);
}
window.onload=function(){
$("div1").addEventListener("click",function(){
alert("div1");
});
$("div2").addEventListener("click",function(){
alert("div2");
});
$("p1").addEventListener("click",function(){
alert("p1");
});
}
当我点击<p>中的文字 弹出窗口的顺序是:
p1 -> div2 -> div1