JavaScript之坑了我--事件模型細節

  首先我們還得了解:
  事件物件：事件發生時系統自動產生的物件，其內封裝了此事件的所有資訊。

低版本IE：window.event

W3C    ：事件繫結時直接傳引數 如：obj.onclick = function(event){};當事件觸發時，瀏覽器會將事件資訊封裝到事件物件中，然後作為引數傳遞obj.onclick(event)並且執行之。                                                                                                 

從最裡層到最外層 ： 冒泡模型（預設）

從最外層向最裡層 ： 捕捉模型（不建議了）
案例：    

<--div id="div1" width="1000px">

                   <--div id="div2" width="700px">

                            <--div id="div3" width="300px">

                                     <--font color="green">green<--/font>

                           <--/div>

                            <--font color="yellow">yellow<--/font>

                  <--/div>

         <--font color="red">red<--/font>

<--/div>
<--script>

document.getElementById("div3").onclick = function(event){

    alert("green");

}

document.getElementById("div2").onclick = function(event){
    alert("yellow");
}

document.getElementById("div1").onclick = function(event){
    alert("red");
}
<--script> 

document.getElementById("div3").onclick = function(event){

    alert("green");
    stopEventBubble(event);

}

document.getElementById("div2").onclick = function(event){
    alert("yellow");

    stopEventBubble(event);

}

document.getElementById("div1").onclick = function(event){
    alert("red");

    stopEventBubble(event);

}


//阻止事件冒泡  
function stopEventBubble(event){ 
 var e=event || window.event; 
 if (e && e.stopPropagation){
            e.stopPropagation();    
        } else{
            e.cancelBubble=true;
        }

}

<--/script

 html部分元素的預設行為及如何控制：

     連結：點選後跳轉 

     提交按鈕：點選後提交

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29900383/viewspace-1822690/，如需轉載，請註明出處，否則將追究法律責任。