event.preventDefault() 跟 event.stopPropagation() 差別

#event.preventDefault()

取消事件的預設行為，例如避免送出表單或阻止超連結。

但是不會影響事件傳遞，事件的捕獲與冒泡會正常傳遞。

#event.stopPropagation()

可以取消事件的傳遞，可以透過 target.addEventListener(type, listener, useCapture) 的第三個參數來控制要在捕獲階段還是冒泡階段取消事件傳遞。

#範例

今天有一個 html 文件，html 中有 box1 與 box2 兩個區塊，並且對兩個區塊增加監聽事件。

若 box1 事件被觸發，則會執行 console.log() 印出 box1。 若 box2 事件被觸發，則會送出表單，並會執行 console.log() 印出 box2。

#情況一：無 event.preventDefault() 也無 event.stopPropagation()

在此情況下 box1 與 box2 事件都被觸發，會送出表單並且同時印出 box1 與 box2。

#情況二：在 box2 中加上 event.preventDefault()

此時表單不會被送出，但 box1 與 box2 都會被印出來。這邊的預設行為是送出表單，因為 event.preventDefault() 因此被取消了。由於事件傳遞依然會繼續，因此 box1 仍會被印出。

#情況三：在 box2 中加上 event.stopPropagation()

此時表單會被送出，會印出 box2 但不會印出 box1。因為向上傳遞的事件被取消了，因此 box1 不會歷經冒泡階段，所以不會印出 box1。