js事件冒泡與事件捕獲詳解

更新時間：2017年02月20日 10:08:23 作者：FlyingWWS

本文主要介紹了js事件冒泡與事件捕獲的相關(guān)知識。具有很好的參考價值，下面跟著小編一起來看下吧

（一）事件綁定

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);
 }
 //只能綁定一個事件處理函數(shù)，后面的會覆蓋前面的；
</script>

2.符合W3C標(biāo)準(zhǔn)的事件綁定（addEventListener和removeEventListener）

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

type:必須，表示監(jiān)聽事件類型的字符串；

listener:必須，當(dāng)所監(jiān)聽的事件類型觸發(fā)時，會接收到一個事件通知對象；listener 必須是一個實現(xiàn)了 EventListener 接口的對象，或者是一個函數(shù)；

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

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

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

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

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

<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>

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

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

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

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

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

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

圖片來自網(wǎng)絡(luò)：

<div id="A" style="width:300px; height:300px; background:red;position:relative;">
 <div id="B" style="width:200px;height:200px; background:green;position:relative;top:50px;margin:auto;">
 <div id="C" style="width:100px;height:100px; background:blue;position:relative;top:50px;margin:auto;"></div> 
 </div>
</div>
<script>
 var A = document.getElementById("A"); 
 var B = document.getElementById("B"); 
 var C = document.getElementById("C"); 
 // 目標(biāo)（目標(biāo)階段的處理函數(shù)，先注冊先執(zhí)行）
 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>
//當(dāng)點擊C時（藍(lán)色），輸出At Bt Ct Cf Bf Af

阻止事件的傳播：

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

• 在IE下設(shè)置cancelBubble = true；

阻止事件的默認(rèn)行為：

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

• 在IE下設(shè)置window.event.returnValue = false;

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: