事件冒泡與事件捕獲的原理與實(shí)現(xiàn)方式
事件冒泡（Event Bubbling）和事件捕獲（Event Capturing）是JavaScript中處理DOM（文檔對(duì)象模型）事件的兩種不同的機(jī)制。了解它們的原理和實(shí)現(xiàn)方式可以幫助我們更好地理解和處理事件。
事件冒泡原理：
事件冒泡是指當(dāng)一個(gè)具體的事件發(fā)生在某個(gè)DOM元素上時(shí)，如果該元素定義了該事件的處理函數(shù)，那么該事件將首先在該元素上觸發(fā)，然后逐級(jí)向上冒泡至該元素的父元素，直到觸發(fā)文檔根元素的處理函數(shù)。
實(shí)現(xiàn)方式：
在JavaScript中，我們可以使用addEventListener方法來(lái)為元素添加事件監(jiān)聽(tīng)器，從而實(shí)現(xiàn)事件冒泡。
以下是一個(gè)示例：
// HTML代碼：
<div id="outer">
<div id="inner">
<button id="btn">按鈕</button>
</div>
</div>
// JavaScript代碼：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');
outer.addEventListener('click', function() {
console.log('外層div被點(diǎn)擊！');
});
inner.addEventListener('click', function() {
console.log('內(nèi)層div被點(diǎn)擊！');
});
btn.addEventListener('click', function(event) {
console.log('按鈕被點(diǎn)擊！');
event.stopPropagation(); // 阻止事件冒泡
});
登錄后復(fù)制
在以上代碼中，當(dāng)我們點(diǎn)擊按鈕時(shí)，事件冒泡會(huì)從最內(nèi)層元素逐級(jí)向上觸發(fā)，先執(zhí)行按鈕的點(diǎn)擊事件處理函數(shù)，然后是內(nèi)層div的事件處理函數(shù)，最后是外層div的事件處理函數(shù)。
事件捕獲原理：
事件捕獲與事件冒泡相反，事件捕獲是指在觸發(fā)具體事件之前，從文檔根元素開(kāi)始，逐級(jí)向下經(jīng)過(guò)DOM樹的各個(gè)元素，直到該元素的事件處理函數(shù)被觸發(fā)。
實(shí)現(xiàn)方式：
同樣地，我們可以使用addEventListener方法來(lái)為元素添加事件監(jiān)聽(tīng)器，從而實(shí)現(xiàn)事件捕獲。
以下是一個(gè)示例：
// HTML代碼：
<div id="outer">
<div id="inner">
<button id="btn">按鈕</button>
</div>
</div>
// JavaScript代碼：
const outer = document.querySelector('#outer');
const inner = document.querySelector('#inner');
const btn = document.querySelector('#btn');
outer.addEventListener('click', function() {
console.log('外層div被點(diǎn)擊！');
}, true);
inner.addEventListener('click', function() {
console.log('內(nèi)層div被點(diǎn)擊！');
}, true);
btn.addEventListener('click', function() {
console.log('按鈕被點(diǎn)擊！');
}, true);
登錄后復(fù)制
在以上代碼中，當(dāng)我們點(diǎn)擊按鈕時(shí)，事件會(huì)從文檔根元素開(kāi)始，逐級(jí)向下觸發(fā)，先執(zhí)行外層div的事件處理函數(shù)，然后是內(nèi)層div的事件處理函數(shù)，最后才執(zhí)行按鈕的點(diǎn)擊事件處理函數(shù)。
總結(jié)：
事件冒泡和事件捕獲是JavaScript中處理DOM事件的兩種不同機(jī)制，它們分別沿著DOM樹的不同方向進(jìn)行事件的傳播。事件冒泡從觸發(fā)元素開(kāi)始，逐級(jí)向上冒泡至文檔根元素；事件捕獲從文檔根元素開(kāi)始，逐級(jí)向下傳播至觸發(fā)元素。我們可以使用addEventListener方法為元素添加事件監(jiān)聽(tīng)器，在第三個(gè)參數(shù)中設(shè)置是否使用事件捕獲或者冒泡。
