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

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

成都創(chuàng)新互聯(lián)專注于網(wǎng)站建設，為客戶提供成都網(wǎng)站建設、成都網(wǎng)站設計、網(wǎng)頁設計開發(fā)服務，多年建網(wǎng)站服務經(jīng)驗，各類網(wǎng)站都可以開發(fā)，品牌網(wǎng)站設計，公司官網(wǎng)，公司展示網(wǎng)站，網(wǎng)站設計，建網(wǎng)站費用，建網(wǎng)站多少錢，價格優(yōu)惠，收費合理。

（一）事件綁定

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標準的事件綁定（addEventListener和removeEventListener）

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

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

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

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

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

這兩個函數(shù)Firefox和Chrome都支持，IE9及以后也支持這兩個函數(shù)；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
 }
 //當點擊按鈕時，函數(shù)handler會執(zhí)行2次，一次為事件捕獲，一次為事件冒泡；
 //如果綁定的是同一個事件處理函數(shù)，且都是事件捕獲或都是事件冒泡，那么只能綁定一次；
</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>

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

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

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

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

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

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

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

<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"); 
 // 目標（目標階段的處理函數(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>
//當點擊C時（藍色），輸出At Bt Ct Cf Bf Af

阻止事件的傳播：

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

? 在IE下設置cancelBubble = true；

阻止事件的默認行為：

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

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

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

網(wǎng)頁名稱：js事件冒泡與事件捕獲的示例分析
本文路徑：http://muchs.cn/article42/jcjchc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、企業(yè)網(wǎng)站制作、域名注冊、移動網(wǎng)站建設、關鍵詞優(yōu)化、App設計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)