JavaScript中捕獲與冒泡詳解及實(shí)例
JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡
事件流描述的是從頁面中接收事件的順序。提出事件流概念的正是IE和Netscape，但是前者提出的是我們常用的事件冒泡流，而后者提出的是事件捕獲流。
第一部分：事件冒泡
即事件開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點(diǎn)（文檔）。
下面舉一個(gè)簡單的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bubble</title>
<style>
button{
background: red;
color:white;
}
#third{
width: 50px;
height: 50px;
border:thin solid red;
}
#second{
width: 100px;
height: 100px;
border:thin solid red;
}
#first{
width:200px;
height: 200px;
border:thin solid red;
}
</style>
</head>
<body>
<div id="first">
<div id="second" >
<div id="third" >
<button id="button">事件冒泡</button>
</div>
</div>
</div>
<script>
document.getElementById("button").addEventListener("click",function(){
alert("button");
},false);
document.getElementById("third").addEventListener("click",function(){
alert("third");
},false);
document.getElementById("second").addEventListener("click",function(){
alert("second");
},false);
document.getElementById("first").addEventListener("click",function(){
alert("first");
},false);
</script>
</body>
</html>
這時(shí)，我們只點(diǎn)擊button元素，效果如下：
可以看到，雖然我們只點(diǎn)擊了button元素，但是，button外的third、second、first上的事件由內(nèi)向外以此被觸發(fā)，觸發(fā)的順序是由DOM樹的下層到DOM樹的最上面，故稱為冒泡。
（說明：盡管這里我使用了DOM2級事件處理程序，并設(shè)置每個(gè)事件為冒泡階段發(fā)生，但是即使使用DOM0級，得到的結(jié)果也是這樣的，冒泡是默認(rèn)的）
但是如果我們不希望事件冒泡呢？那么如何阻止事件冒泡？
實(shí)際上，事件的對象有一個(gè)stopPropagation()方法可以阻止事件冒泡，我們只需要把上個(gè)例子中button的事件處理程序修改如下：
document.getElementById("button").addEventListener("click",function(event){
alert("button");
event.stopPropagation();
},false);
這樣，點(diǎn)擊button后，只會彈出一個(gè)彈窗，顯示button。
注意：現(xiàn)代所有的瀏覽器都支持事件冒泡，只是在實(shí)現(xiàn)上有一些差別。
第二部分：事件捕獲
事件捕獲和事件冒泡是剛好相反的，事件捕獲是指不太具體的節(jié)點(diǎn)應(yīng)該更早的接收到事件，而最具體的節(jié)點(diǎn)應(yīng)該最后接收到事件。舉例如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bubble</title>
<style>
button{
background: red;
color:white;
}
#third{
width: 50px;
height: 50px;
border:thin solid red;
}
#second{
width: 100px;
height: 100px;
border:thin solid red;
}
#first{
width:200px;
height: 200px;
border:thin solid red;
}
</style>
</head>
<body>
<div id="first">
<div id="second" >
<div id="third" >
<button id="button">事件冒泡</button>
</div>
</div>
</div>
<script>
document.getElementById("button").addEventListener("click",function(){
alert("button");
},true);
document.getElementById("third").addEventListener("click",function(){
alert("third");
},true);
document.getElementById("second").addEventListener("click",function(){
alert("second");
},true);
document.getElementById("first").addEventListener("click",function(){
alert("first");
},true);
</script>
</body>
</html>
大家可以看到這個(gè)例子我只是把a(bǔ)ddEventListener()方法的第三個(gè)參數(shù)由前面例子的false修改為了true,也就是使用捕獲方式獲得button，那么結(jié)果如下：
我們可以看到最外層的事件先被觸發(fā)，最后才是我們點(diǎn)擊的button事件被觸發(fā)，這便是事件捕獲。
那么我們?nèi)绾尾拍茏柚故录牟东@呢？使用event.stopPropagation()方法嗎？答案是否定的，這里要知道，stopPropagation()方法只能阻止事件的冒泡，而不能阻止事件捕獲。
但是我們可以使用DOM3級新增事件stopImmediatePropagation()方法來阻止事件捕獲，另外此方法還可以阻止事件冒泡。應(yīng)用如下：
document.getElementById("second").addEventListener("click",function(){
alert("second");
event.stopImmediatePropagation();
},true);
這樣，就可以在id為second處阻止事件的捕獲了。
注意：盡管這是Netscape Navigator提出的事件流，但是現(xiàn)在所有的瀏覽器都支持這種事件流模型。但是由于老的瀏覽器不支持，所以很少有人使用事件捕獲。
第三部分：DOM事件流
DOM2級事件規(guī)定的時(shí)間流包括 三個(gè)階段：
- 事件捕獲階段
- 處于目標(biāo)階段
- 事件冒泡階段
注意：在DOM事件流中，實(shí)際的目標(biāo)在捕獲階段不會接收到事件，下一個(gè)階段是處于目標(biāo)階段，這時(shí)事件被觸發(fā)，最后進(jìn)入事件冒泡階段。我們認(rèn)為處于目標(biāo)階段是事件冒泡階段的一部分。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
js中的for如何實(shí)現(xiàn)foreach中的遍歷
js中沒有foreach這個(gè)關(guān)鍵字，但是可以用var v in array來實(shí)現(xiàn)遍歷，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
BootStrap Validator 版本差異問題導(dǎo)致的submitHandler失效問題的解決方法
這篇文章主要介紹了BootStrap Validator 版本差異問題導(dǎo)致的submitHandler失效問題的解決方法,下面通過本文給大家詳細(xì)說明一下，需要的朋友可以參考下2016-12-12
本文主要介紹了詳解ajax、fetch、axios的區(qū)別，眾所周知它們都用來發(fā)送請求，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
js getBoundingClientRect使用方法詳解
這篇文章主要介紹了js getBoundingClientRect使用方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
帶你領(lǐng)略O(shè)bject.assign()方法的操作方式
這篇文章主要介紹了帶你領(lǐng)略O(shè)bject.assign()方法的操作方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
JavaScript?裝飾器是一種特殊的功能，允許在不修改源代碼的情況下動態(tài)修改類和函數(shù)的行為，本文將介紹五個(gè)讓你眼前一亮的裝飾器技巧，包括裝飾函數(shù)參數(shù)、裝飾類屬性、裝飾函數(shù)返回值和裝飾函數(shù)調(diào)用,需要的朋友可以參考下2023-06-06
2022發(fā)布ECMAScript新特性盤點(diǎn)
這篇文章主要為大家介紹了2022發(fā)布ECMAScript新特性盤點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
JavaScript 中有關(guān)數(shù)組對象的方法(詳解)
下面小編就為大家?guī)硪黄狫avaScript 中有關(guān)數(shù)組對象的方法(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
JavaScript正則表達(dá)式exec/g實(shí)現(xiàn)多次循環(huán)用法示例
這篇文章主要介紹了JavaScript正則表達(dá)式exec/g實(shí)現(xiàn)多次循環(huán)用法,結(jié)合實(shí)例形式分析了javascript正則表達(dá)式g修飾符相關(guān)使用技巧,需要的朋友可以參考下2017-01-01
需要獲得圖片的長寬，在IE、FireFox下均正常，就TMD在Chrome中不行，有人說是Chrome版本的問題，最終終于找到了解決方法，在這與大家分享下2013-03-03