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

這篇文章給大家分享的是有關(guān)js事件冒泡與事件捕獲的示例分析的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

（一）事件綁定

1.普通事件綁定

給html添加一個(gè)以on開(kāi)頭的特定的屬性（如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對(duì)象
 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);
 }
 //只能綁定一個(gè)事件處理函數(shù)，后面的會(huì)覆蓋前面的；
</script>

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

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

type:必須，表示監(jiān)聽(tīng)事件類(lèi)型的字符串；

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

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

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

這兩個(gè)函數(shù)Firefox和Chrome都支持，IE9及以后也支持這兩個(gè)函數(shù)；IE使用attachEvent/detachEvent來(lái)進(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對(duì)象； attachEvent指向的是window對(duì)象
 }
</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)點(diǎn)擊按鈕時(shí)，函數(shù)handler會(huì)執(zhí)行2次，一次為事件捕獲，一次為事件冒泡；
 //如果綁定的是同一個(gè)事件處理函數(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對(duì)象； addEventListener指向的是dom對(duì)象
 }
</script>

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

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

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

事件捕獲：就是從最外層到目標(biāo)對(duì)象的順序觸發(fā)（如上面的代碼，如果點(diǎn)擊C，它的觸發(fā)順序?yàn)锳→B→C）

事件冒泡：就是從目標(biāo)對(duì)象到外層的順序觸發(fā)（如果點(diǎn)擊C,它的觸發(fā)順序?yàn)镃→B→A）

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

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

<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"); 
 // 目標(biāo)（目標(biāo)階段的處理函數(shù)，先注冊(cè)先執(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)點(diǎn)擊C時(shí)（藍(lán)色），輸出At Bt Ct Cf Bf Af

阻止事件的傳播：

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

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

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

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

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

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