HackMD
event.preventDefault() 跟 event.stopPropagation() 差別
tags: DOM
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。
