這篇文章帶給大家的內容是關於JavaScript冒泡和捕獲的知識介紹（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
JS 冒泡和捕獲是怎麼回事
冒泡和捕獲是指在元素上的事件被觸發的時候，js 傳遞事件的兩種方向，或者說過程。
前言：
如，有這麼一個頁面和js 方法
Less: 我用less寫的，如果沒有less 環境，可以無視這段。
.level {
padding: 50px 80px;
}
.level-template(@level: 1, @color: #fff){
background-color: darken( @color , 5% * @level);
}
#lv1{ .level-template(1)}
#lv2{ .level-template(2)}
#lv3{ .level-template(3)}
#lv4{ .level-template(4)}HTML
<div> <div> <div> <div> </div> </div> </div> </div>
JS
function $(id) {
return document.getElementById(id);
}
window.onload = () => {
$('lv1').addEventListener("click",()=>{console.log('lv1')},true);
$('lv2').addEventListener("click",()=>{console.log('lv2')},true);
$('lv3').addEventListener("click",()=>{console.log('lv3')},true);
};
// 上面的 () => {} 为 ES6 的匿名方法的定义方式
// 等同于
function () {
console.log('lv1')
}上面的js 做的事：
在頁面載入的時候，給三個div添加click 監聽方法，自己被點擊的時候會在console 中輸出自己的id 值。
頁的結構是這樣的 lv1 包含 lv2，lv2 又包含 lv3，當點選 lv3 的時候，其實也點選了 lv2 與 lv1，因為 lv3 在 lv2 內部，點選 lv3 的時候，自然也點選了lv2 和 lv1，也就是說，點選 lv3 的時候，會觸發三個 click 事件。
至於這三個事件觸發的順序，就是所謂的 冒泡 和 捕捉。
事件觸發經過的三個階段：
document 往事件觸發對象，從外向內捕捉事件物件；1. 捕獲階段
如上面的例子，在 lv3 被點擊的時候，js 會從文件的最上層開始，由外向內尋找點擊事件的起源，也就是 lv3。那麼這個由外而內的過程就是 lv1 --> lv2 --> lv3，這三個 p 的 click 事件依序被觸發。
這個觸發的方向就是捕捉的方向。
2. 冒泡階段
在找到被點擊的lv3 之後，事件向上傳遞，過程是 lv3 --> lv2 --> lv1，此時依序觸發 lv3、lv2 、lv1 的 click 事件，這個由內向外的觸發過程就稱為冒泡
再回看一下最常用的事件綁定方法的格式：
element.addEventListener(event, function, useCapture)
這裡面，useCapture 是個布林值，用於定義事件是在冒泡階段觸發，還是在捕獲階段觸發，預設值是 false，代表在冒泡時觸發。
此時你就會知道上面那個例子裡定義的click 方法是在 捕獲階段 執行，那麼返回的結果就是
lv1 lv2 lv3
如果最上面的例子，onload 內容是這樣的
window.onload = () => {
$('lv1').addEventListener("click",()=>{console.log('lv1')},false);
$('lv2').addEventListener("click",()=>{console.log('lv2')},false);
$('lv3').addEventListener("click",()=>{console.log('lv3')},false);
};那麼也就是說，click 事件在冒泡階段觸發，回傳的結果就是
lv3 lv2 lv1
總結
以上是JavaScript冒泡與捕捉的知識介紹（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
