js事件冒泡與事件捕獲的示例分析

這篇文章給大家分享的是有關js事件冒泡與事件捕獲的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

（一）事件綁定

1.普通事件綁定

給html添加一個以on開頭的特定的屬性（如onclick，onfocus）;

<button id="A" onclick="alert(this.id)">方式一</button>

<button id="A" onclick="handler(this)">方式二</button>
<script>
 function handler(btn){
 alert(this.id); //undefined this指向window對象
 alert(btn.id); //A 
 }
</script>

<button id="A">方式三</button>
<script>
 var btn = document.getElementById("A");
 btn.onclick = function(){
 alert("1:"+this.id);
 }
 btn.onclick = function(){
 alert("2:"+this.id);
 }
 //只能綁定一個事件處理函數，后面的會覆蓋前面的；
</script>

2.符合W3C標準的事件綁定（addEventListener和removeEventListener）

target.addEventListener(type, listener[, useCapture]);

type:必須，表示監聽事件類型的字符串；

listener:必須，當所監聽的事件類型觸發時，會接收到一個事件通知對象；listener 必須是一個實現了 EventListener 接口的對象，或者是一個函數；

useCapture:可選，Boolean,默認為false，表示事件傳播方式為事件冒泡；true,表示事件傳播方式為事件捕獲；

（事件捕獲與事件冒泡下面有講到）

這兩個函數Firefox和Chrome都支持，IE9及以后也支持這兩個函數；IE使用attachEvent/detachEvent來進行事件綁定和取消；

<button id="B">W3C標準一</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B this指向的是dom對象； attachEvent指向的是window對象
 }
</script>

<button id="B">W3C標準二</button>
<script>
 var btn = document.getElementById("B");
 btn.addEventListener("click",handler,true);
 btn.addEventListener("click",handler,false);
 function handler(){
 alert(this.id); //B
 }
 //當點擊按鈕時，函數handler會執行2次，一次為事件捕獲，一次為事件冒泡；
 //如果綁定的是同一個事件處理函數，且都是事件捕獲或都是事件冒泡，那么只能綁定一次；
</script>

3.IE瀏覽器使用attachEvent/detachEvent進行事件綁定與取消

<button id="C">IE</button>
<script>
 var btn = document.getElementById("C");
 btn.attachEvent("click",handler);
 function handler(){
 alert(this.id); //undifined this指向的是window對象； addEventListener指向的是dom對象
 }
</script>

注：同一個事件處理函數只能綁定一次；不同的函數對象可以重復綁定不會覆蓋；匿名函數和匿名函數即使代碼完全一樣，也是互相不相同的；

（二）事件捕獲與事件冒泡

<div id="A">
 <div id="B">
 <div id="C"></div>
 </div>
</div>

事件捕獲：就是從最外層到目標對象的順序觸發（如上面的代碼，如果點擊C，它的觸發順序為A→B→C）

事件冒泡：就是從目標對象到外層的順序觸發（如果點擊C,它的觸發順序為C→B→A）

DOM事件流：就是支持兩種事件模型，捕獲型事件和冒泡型事件，捕獲型事件先發生；兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。

圖片來自網絡：

<div id="A" >
 <div id="B" >
 <div id="C" ></div> 
 </div>
</div>
<script>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // 目標（目標階段的處理函數，先注冊先執行）
 C.addEventListener('click',function(){alert("Ct");},true);
 C.addEventListener('click',function(){alert("Cf");},false);
 // 事件冒泡
 A.addEventListener('click',function(){alert("Af");},false);
 B.addEventListener('click',function(){alert("Bf");},false);
 // 事件捕獲
 A.addEventListener('click',function(){alert("At");},true);
 B.addEventListener('click',function(){alert("Bt");},true); 
</script>
//當點擊C時（藍色），輸出At Bt Ct Cf Bf Af

阻止事件的傳播：

? 在W3c中，使用stopPropagation（）方法

? 在IE下設置cancelBubble = true；

阻止事件的默認行為：

? 在W3c中，使用preventDefault（）方法；

? 在IE下設置window.event.returnValue = false;

感謝各位的閱讀！關于“js事件冒泡與事件捕獲的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！