當前位置：首頁 >

[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）

發布時間：2023/11/27 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 [JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

事件冒泡

添加三個套在一起的div元素，在最里面放一個button，感受事件觸發時從里到外“冒泡”的過程。
給每個div都加一個事件：點擊時就alert
test.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./test1.css" /></head><body><div class="div1"><div class="div2"><div class="div3"><button>click me</button></div></div></div></body><script>let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click', () => {alert('div1 now!')})div2.addEventListener('click', () => {alert('div2 now!')})div3.addEventListener('click', () => {alert('div3 now!')})</script>
</html>

test1.css

.div1 {width: 500px;height: 500px;background-color: aquamarine;
}.div2 {width: 400px;height: 400px;background-color: bisque;
}.div3 {width: 300px;height: 300px;background-color: rgb(234, 178, 248);
}

運行結果：

點擊后：

以上三個alert依次出現，可見這是一個從內到外的“冒泡”的過程。

阻止事件冒泡

阻止事件冒泡有兩種方式

在要要觸發的點擊事件函數中寫window.event.cancelBubble = true
這種方法 IE和谷歌支持，而火狐不支持

    let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click', () => {alert('div1 now!')})div2.addEventListener('click', () => {alert('div2 now!')window.event.cancelBubble = true})div3.addEventListener('click', () => {alert('div3 now!')})

運行結果：

然后就沒了，冒泡終止了。

在事件處理函數中傳入一個對象參數，在函數中添加對象參數.stopPropagation;

div2.addEventListener('click', (e) => {alert('div2 now!')e.stopPropagation()})

運行結果和上面一樣就不展示了。

事件的三個階段

事件捕獲階段–處于目標階段–事件冒泡階段
在addEventListener()方法中，第三個參數可以設置在事件的哪個階段運行這段代碼，false設置對象為冒泡階段，true設置對象為為捕獲階段
對于參數e，.eventPhase 屬性可以判斷事件處于哪個階段（這是一個number類型的值）
值為 1 則是事件捕獲階段
值為 2 則是目標階段
值為 3 則是事件冒泡階段
示例代碼

let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click',(e) => {console.log('div1 now!')console.log('1', e.eventPhase)},false,)div2.addEventListener('click',(e) => {console.log('div2 now!')// window.event.cancelBubble = true// e.stopPropagation()console.log('2', e.eventPhase)},true,)div3.addEventListener('click', (e) => {console.log('div3 now!')console.log('3', e.eventPhase)})

運行結果：

在div2的addEventListener傳入的參數里，函數后面加了一個true，表示這段代碼在事件捕獲期間運行，所以展示出2先被運行的結果。
同時，e.eventPhase在此時的值也是1

事件處于目標階段

在剛剛的代碼里，最內層div3里還有一個button，這是說明當一個元素內部被指定為目標時，這個元素也要經歷捕獲和冒泡的階段（在DOM樹上是它的父節點么！）
現在我們刪掉這個button看一看。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><link rel="stylesheet" href="./test1.css" /></head><body><div class="div1"><div class="div2"><div class="div3">click me</div></div></div></body><script>let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click',(e) => {console.log('div1 now!')console.log('1', e.eventPhase)},false,)div2.addEventListener('click',(e) => {console.log('div2 now!')// window.event.cancelBubble = true// e.stopPropagation()console.log('2', e.eventPhase)},true,)div3.addEventListener('click', (e) => {console.log('div3 now!')console.log('3', e.eventPhase)})</script>
</html>

運行結果：

執行順序是：
捕獲—div2的事件觸發
目標—div3的事件觸發
冒泡—div1的事件觸發
這就說明：當這個事件處于目標時，它是不參與捕獲和冒泡的！（只有它的祖宗們參與捕獲和冒泡）

總結

以上是生活随笔為你收集整理的[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。