第 13 天的挑戰,我探索了 JavaScript 的事件傳遞機制,尤其是捕獲(capture)與冒泡(bubble)。在事件發生時,瀏覽器會先從父節點向下傳遞事件到目標節點(捕獲),接著再從目標節點向上傳遞回去(冒泡)。在這過程中,我學會了如何透過 event.stopPropagation() 來控制事件傳遞的順序,以及 event.preventDefault() 來阻止預設行為。這讓我對事件機制的理解更深入,也知道如何精確地控制使用者的互動行為。
結果:
點擊 button 只會觸發 "Child clicked",而不會觸發 "Parent clicked"。
結果:
點擊連結後,彈出提示框,但不會跳轉到新的頁面。
今天我從事件傳遞中學到了如何運用捕獲與冒泡來精準控制事件的流向,這在複雜的頁面設計中非常有用。