JavaScript 事件傳遞 JavaScript 作為前端開發的重要語言，處理和操作用戶與網頁的交互行為，其中事件的傳遞機制也是非常重要的一個概念。了解 JavaScript 事件傳遞機制，可以深入理解網頁交互機制，提高編程效率。 JavaScript 事件傳遞機制分為三個階段：捕獲階段、目標階段和冒泡階段。默認情況下，JavaScript 事件處理程序注冊到冒泡階段。換言之，當有交互事件（例如鼠標點擊）發生時，該事件從最上層的父元素不斷向下傳遞，遇到具體的目標元素后，再從目標元素向上冒泡，一直到最上層元素為止。 比如我們有如下代碼：

Inner element

如果我們要給 inner 元素添加一個監聽器來處理 onclick 事件，那么代碼可以寫成：

const innerElement = document.getElementById('inner');
innerElement.addEventListener('click', function() {
console.log('Inner element clicked');
});

此時，當我們點擊 inner 元素時，控制臺會輸出 'Inner element clicked'，因為目標事件發生在 inner 元素上，之后該事件會沿著 DOM 樹向上冒泡，直到 outer 元素。 我們可以通過 stopPropagation() 方法來阻止事件的傳遞和冒泡。如果我們在監聽器中加上 stopPropagation()，則事件就不會繼續往下傳遞和往上冒泡了。 例如：

const innerElement = document.getElementById('inner');
innerElement.addEventListener('click', function(event) {
console.log('Inner element clicked');
event.stopPropagation(); // 阻止事件的傳遞和冒泡
});

在這個例子中，當點擊 inner 元素時，只會輸出 'Inner element clicked'。如果沒有 stopPropagation()，則輸出 'Inner element clicked' 后還會輸出 'outer clicked'。 除了 stopPropagation()，還有 preventDefault() 方法可以阻止事件的默認行為，例如禁用鏈接的跳轉或表單提交等。 總之，JavaScript 事件傳遞機制是前端開發中不可或缺的一環。掌握它，能夠更好地控制網頁交互行為，提高用戶體驗。