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