[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
生活随笔
收集整理的這篇文章主要介紹了
[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
事件冒泡
- 添加三個(gè)套在一起的div元素，在最里面放一個(gè)button，感受事件觸發(fā)時(shí)從里到外“冒泡”的過程。
- 給每個(gè)div都加一個(gè)事件：點(diǎn)擊時(shí)就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)擊后：
以上三個(gè)alert依次出現(xiàn)，可見這是一個(gè)從內(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ù)中傳入一個(gè)對(duì)象參數(shù)，在函數(shù)中添加對(duì)象參數(shù)
.stopPropagation;
div2.addEventListener('click', (e) => {alert('div2 now!')e.stopPropagation()})
運(yùn)行結(jié)果和上面一樣就不展示了。
事件的三個(gè)階段
- 事件捕獲階段–處于目標(biāo)階段–事件冒泡階段
- 在
addEventListener()方法中，第三個(gè)參數(shù)可以設(shè)置在事件的哪個(gè)階段運(yùn)行這段代碼，false設(shè)置對(duì)象為冒泡階段，true設(shè)置對(duì)象為為捕獲階段 - 對(duì)于參數(shù)
e，.eventPhase屬性可以判斷事件處于哪個(gè)階段（這是一個(gè)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ù)后面加了一個(gè)true，表示這段代碼在事件捕獲期間運(yùn)行，所以展示出2先被運(yùn)行的結(jié)果。 - 同時(shí)，
e.eventPhase在此時(shí)的值也是1
事件處于目標(biāo)階段
- 在剛剛的代碼里，最內(nèi)層
div3里還有一個(gè)button，這是說(shuō)明當(dāng)一個(gè)元素內(nèi)部被指定為目標(biāo)時(shí)，這個(gè)元素也要經(jīng)歷捕獲和冒泡的階段（在DOM樹上是它的父節(jié)點(diǎn)么！） - 現(xiàn)在我們刪掉這個(gè)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ā)
- 這就說(shuō)明：當(dāng)這個(gè)事件處于目標(biāo)時(shí)，它是不參與捕獲和冒泡的！（只有它的祖宗們參與捕獲和冒泡）
總結(jié)
以上是生活随笔為你收集整理的[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 护照办理多少钱啊？
- 下一篇： [JS] 关于parseInt的一个小知