當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發(fā)布時間：2023/11/27 生活经验 29 豆豆

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

事件冒泡

添加三個套在一起的div元素，在最里面放一個button，感受事件觸發(fā)時從里到外“冒泡”的過程。
給每個div都加一個事件：點(diǎn)擊時就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);
}

運(yùn)行結(jié)果：

點(diǎn)擊后：

以上三個alert依次出現(xiàn)，可見這是一個從內(nèi)到外的“冒泡”的過程。

阻止事件冒泡

阻止事件冒泡有兩種方式

在要要觸發(fā)的點(diǎn)擊事件函數(shù)中寫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!')})

運(yùn)行結(jié)果：

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

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

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

運(yùn)行結(jié)果和上面一樣就不展示了。

事件的三個階段

事件捕獲階段–處于目標(biāo)階段–事件冒泡階段
在addEventListener()方法中，第三個參數(shù)可以設(shè)置在事件的哪個階段運(yùn)行這段代碼，false設(shè)置對象為冒泡階段，true設(shè)置對象為為捕獲階段
對于參數(shù)e，.eventPhase 屬性可以判斷事件處于哪個階段（這是一個number類型的值）
值為 1 則是事件捕獲階段
值為 2 則是目標(biāo)階段
值為 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)})

運(yùn)行結(jié)果：

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

事件處于目標(biāo)階段

在剛剛的代碼里，最內(nèi)層div3里還有一個button，這是說明當(dāng)一個元素內(nèi)部被指定為目標(biāo)時，這個元素也要經(jīng)歷捕獲和冒泡的階段（在DOM樹上是它的父節(jié)點(diǎn)么！）
現(xiàn)在我們刪掉這個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>

運(yùn)行結(jié)果：

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。