JavaScript中捕獲/阻止捕獲、冒泡/阻止冒泡方法
事件流描述的是從頁面中接收事件的順序。提出事件流概念的正是IE和Netscape，但是前者提出的是我們常用的事件冒泡流，而后者提出的是事件捕獲流。
第一部分：事件冒泡
即事件開始由最具體的元素接收，然后逐級向上傳播到較為不具體的節(jié)點（文檔）。
下面舉一個簡單的例子：
<!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>
這時，我們只點擊button元素，效果如下：
可以看到，雖然我們只點擊了button元素，但是，button外的third、second、first上的事件由內(nèi)向外以此被觸發(fā)，觸發(fā)的順序是由DOM樹的下層到DOM樹的最上面，故稱為冒泡。
（說明：盡管這里我使用了DOM2級事件處理程序，并設(shè)置每個事件為冒泡階段發(fā)生，但是即使使用DOM0級，得到的結(jié)果也是這樣的，冒泡是默認(rèn)的）
但是如果我們不希望事件冒泡呢？那么如何阻止事件冒泡？
實際上，事件的對象有一個stopPropagation()方法可以阻止事件冒泡，我們只需要把上個例子中button的事件處理程序修改如下：
document.getElementById("button").addEventListener("click",function(event){
alert("button");
event.stopPropagation();
},false);
這樣，點擊button后，只會彈出一個彈窗，顯示button。
注意：現(xiàn)代所有的瀏覽器都支持事件冒泡，只是在實現(xiàn)上有一些差別。
第二部分：事件捕獲
事件捕獲和事件冒泡是剛好相反的，事件捕獲是指不太具體的節(jié)點應(yīng)該更早的接收到事件，而最具體的節(jié)點應(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>
大家可以看到這個例子我只是把addEventListener()方法的第三個參數(shù)由前面例子的false修改為了true,也就是使用捕獲方式獲得button，那么結(jié)果如下：
我們可以看到最外層的事件先被觸發(fā)，最后才是我們點擊的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ī)定的時間流包括 三個階段：
- 事件捕獲階段
- 處于目標(biāo)階段
- 事件冒泡階段
注意：在DOM事件流中，實際的目標(biāo)在捕獲階段不會接收到事件，下一個階段是處于目標(biāo)階段，這時事件被觸發(fā)，最后進(jìn)入事件冒泡階段。我們認(rèn)為處于目標(biāo)階段是事件冒泡階段的一部分。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- javascript 中事件冒泡和事件捕獲機(jī)制的詳解
- javascript事件捕獲機(jī)制【深入分析IE和DOM中的事件模型】
- js事件監(jiān)聽機(jī)制(事件捕獲)總結(jié)
- JavaScript事件冒泡機(jī)制原理實例解析
- Javascript 事件冒泡機(jī)制詳細(xì)介紹
- js點擊事件的執(zhí)行過程實例分析【冒泡與捕獲】
- javascript事件冒泡詳解和捕獲、阻止方法
- js冒泡、捕獲事件及阻止冒泡方法詳細(xì)總結(jié)
- js事件冒泡、事件捕獲和阻止默認(rèn)事件詳解
- JS中綁定事件順序（事件冒泡與事件捕獲區(qū)別）
- javascript事件冒泡和事件捕獲詳解
- js事件機(jī)制----捕獲與冒泡機(jī)制實例分析
相關(guān)文章
JavaScript進(jìn)階（四）原型與原型鏈用法實例分析
這篇文章主要介紹了JavaScript原型與原型鏈,結(jié)合實例形式分析了JavaScript原型與原型鏈基本概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
layui使用templet格式化表格數(shù)據(jù)的方法
今天小編就為大家分享一篇layui使用templet格式化表格數(shù)據(jù)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)五子棋游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
ES6 系列之 Generator 的自動執(zhí)行的方法示例
這篇文章主要介紹了ES6 系列之 Generator 的自動執(zhí)行的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
EXT中單擊button按鈕grid添加一行（光標(biāo)位置可設(shè)置)的實例代碼
這篇文章主要介紹了EXT中單擊button按鈕grid添加一行（光標(biāo)位置可設(shè)置)的實例代碼 的相關(guān)資料,需要的朋友可以參考下2016-06-06
js 樹組復(fù)制方法2009-02-02
本篇文章主要是對JS操作Array數(shù)組的方法及屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
小程序封裝wx.request請求并創(chuàng)建接口管理文件的實現(xiàn)
這篇文章主要介紹了小程序封裝wx.request請求并創(chuàng)建接口管理文件2019-04-04
無論你開發(fā)使用的是CommonJS規(guī)范還是ES6模塊規(guī)范,打包后的文件都統(tǒng)一使用webpack自定義的模塊規(guī)范來管理、加載模塊,下面這篇文章主要給大家介紹了關(guān)于webpack動態(tài)import原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
JavaScript實現(xiàn)ArrayBuffer到Base64的轉(zhuǎn)換
本文探討了在 JavaScript 中將 ArrayBuffer 轉(zhuǎn)換為 Base64 字符串時遇到的棧溢出問題,并提供了幾種實用的解決方案,我們將通過生動的比喻來解釋相關(guān)概念,比較不同方法的性能和兼容性,最終提供一個平衡而實用的方法,需要的朋友可以參考下2024-10-10