在準備js面試題時，遇到了許多知識盲區，或是已經遺忘的知識，所以來寫一下博客，記錄自己的成長，同時查漏補缺
事件流描述的是從頁面中接收事件的順序，事件發生時會再元素節點直接按照特定的順序傳播，這個傳播程序就是DOM事件流
比如說我們定義兩個盒子，son盒子在far盒子里面，分別給兩個盒子添加點擊事件
點擊fr時，輸出far
點擊son時，輸出son，同時也輸出far
const fa = document.querySelector('.fa')
const so = document.querySelector('.so')
fa.addEventListener('click',function() {
console.log('far');
})
so.addEventListener('click',function() {
console.log('son');
})
//點擊fa時，輸出far
//點擊so時，輸出son，同時也會輸出fa這就是事件冒泡，事件開始時由最具體的元素接收，然后逐級向上傳播到DOM樹的最頂層節點的程序，最早由IE提出
除了事件冒泡外，還有捕獲階段，它與事件冒泡是相反的，事件冒泡由目標元素逐級向頂層元素傳播事件，事件捕獲由最頂層節點開始，然后逐級向下傳播到最具體的元素接收的程序
const fa = document.querySelector('.fa')
const so = document.querySelector('.so')
fa.addEventListener('click',function() {
console.log('far');
},true)
so.addEventListener('click',function() {
console.log('son');
},true)
//還是這個代碼，不過我們改成了捕獲，給每個事件都加了一個true
//沒加true默認是事件冒泡，加了true就是事件捕獲
//點擊far時，就彈出一個far
//點擊son，彈出 far son，先far再彈出son當我們點擊far時，彈出的是far，當我們點擊son時，先彈出far，然后彈出son
這就是事件的捕獲階段
參考pink老師說，我們向水里扔一塊石頭，首先它會有一個下降的程序，這個程序就可以理解為從最頂層向事件發生的最具體元素（目標點）的捕獲程序，之后會產生泡泡，會在最低點（最具體元素）之后漂浮到水面上，這個程序相當于事件冒泡
注意：1.js執行時，我們只能得到一個階段，要么冒泡，要么捕獲，不可能同時存在
2.有些事件時沒有冒泡的，比如onblur，onfocus，onmouseenter，onmouseleave
在實際開發中是我們是很少使用事件捕獲的，用的多的是事件冒泡，如事件代理，事件代理是js面試的必考題
比如說，我想點擊每個a標簽，然后彈出相對應的值，如激活，取消
<div id="div1">
<a id="p1" href="#">激活</a>
<a id="p2" href="#">取消</a>
<a id="p3" href="#">取消</a>
<a id="p4" href="#">取消</a>
<a id="p5" href="#">激活</a>
<a id="p6" href="#">取消</a>
<a id="p7" href="#">取消</a>
<a id="p8" href="#">取消</a>
<button class="btn">加載更多...</button>
</div>要實作這個功能，按照傳統來說，我們需要給每個a添加一個點擊事件，然后列印出相對應的值
但是使用事件代理，可以很輕松的實作這個功能，事件代理基于事件冒泡
我們只需要給a的上級元素添加點擊事件，也就是div
const div1 = document.getElementById('div')
const btn1 = document.getElementsByClassName('btn')
div.addEventListener('click',function(e) {
const target = e.target
if(target.nodeName === 'A') {
console.log(target.innerHTML);
}
})
//e.target可以拿到我們當前點擊的物件，如果我們點擊a，拿到的就是a，點擊div，拿到的就是div
//target.nodeName拿到的是當前元素的標簽名，不過要大寫
//target.innerHTML拿到的是當前元素的內容因為有事件冒泡，即使我們沒給a添加點擊事件，點擊a也可以讓div彈出對應的內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/305703.html
標籤：其他