冒泡事件和非冒泡事件的區(qū)別是什么，需要具體代碼示例
事件在編程中扮演著重要的角色，它可以是用戶的交互行為（如點(diǎn)擊、拖拽等），也可以是瀏覽器或網(wǎng)頁的內(nèi)部行為（如加載完成、窗口大小改變等）。根據(jù)事件傳播方式的不同，事件可以分為冒泡事件和非冒泡事件。
冒泡事件（Bubbling Events）
冒泡事件指的是事件會(huì)從事件目標(biāo)開始，逐級向上層元素進(jìn)行傳播，一直傳播到文檔根節(jié)點(diǎn)。在傳播的過程中，父元素的事件處理程序會(huì)先被觸發(fā)，然后是祖父元素的事件處理程序，依次類推，直到根節(jié)點(diǎn)上的事件處理程序。
下面是一個(gè)冒泡事件的示例代碼：
HTML代碼：
登錄后復(fù)制登錄后復(fù)制
JavaScript代碼：
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');
button.addEventListener('click', function(event) {
console.log('按鈕被點(diǎn)擊');
});
inner.addEventListener('click', function(event) {
console.log('內(nèi)部div被點(diǎn)擊');
});
outer.addEventListener('click', function(event) {
console.log('外部div被點(diǎn)擊');
});
登錄后復(fù)制
當(dāng)點(diǎn)擊按鈕時(shí)，控制臺(tái)會(huì)輸出以下內(nèi)容：
按鈕被點(diǎn)擊 內(nèi)部div被點(diǎn)擊 外部div被點(diǎn)擊
登錄后復(fù)制
從輸出結(jié)果可以看出，冒泡事件先觸發(fā)了按鈕的點(diǎn)擊事件處理程序，然后是內(nèi)部div的點(diǎn)擊事件處理程序，最后是外部div的點(diǎn)擊事件處理程序。
非冒泡事件（Non-bubbling Events）
非冒泡事件指的是事件只會(huì)在事件目標(biāo)上觸發(fā)，并且不會(huì)向上進(jìn)行傳播。換句話說，只有被點(diǎn)擊的元素的事件處理程序會(huì)被執(zhí)行。
下面是一個(gè)非冒泡事件的示例代碼：
HTML代碼：
登錄后復(fù)制登錄后復(fù)制
JavaScript代碼：
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var button = document.getElementById('button');
button.addEventListener('click', function(event) {
console.log('按鈕被點(diǎn)擊');
});
inner.addEventListener('click', function(event) {
console.log('內(nèi)部div被點(diǎn)擊');
});
outer.addEventListener('click', function(event) {
console.log('外部div被點(diǎn)擊');
}, true);
登錄后復(fù)制
當(dāng)點(diǎn)擊按鈕時(shí)，控制臺(tái)只會(huì)輸出以下內(nèi)容：
按鈕被點(diǎn)擊
登錄后復(fù)制
從輸出結(jié)果可以看出，非冒泡事件只觸發(fā)了按鈕的點(diǎn)擊事件處理程序。
綜上所述，冒泡事件和非冒泡事件的主要區(qū)別在于事件傳播的方式。冒泡事件會(huì)從事件目標(biāo)開始向上層元素傳播，而非冒泡事件只會(huì)在事件目標(biāo)上觸發(fā)。了解這兩種事件的區(qū)別對于處理事件傳播以及優(yōu)化頁面的交互效果都是非常重要的。
