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