Table of Contents

• 監聽事件的幾個方法
• addEventListener
• removeEventListener
• event.preventDefault()
• event.stopPropagation()
• Creating custom events
• References

讓元素綁定事件的幾個方法

在前端開發中，我們要讓網頁可以監聽跟回應事件，有幾個方法可以做到。

1. 寫在HTML的元素

<button type="button" onclick="test()">click</button>

function test(event){
  console.log(event)//PointerEvent

2. 寫在Javascript的屬性

<button type="button">click</button>

document.querySelector('button').onclick = (event)=>{
    console.log(event)//PointerEvent
}

3. 寫在addEventListener()方法

<button type="button">click</button>

document.querySelector('button').addEventListener('click',test)

function test(event){
  console.log(event)
}

當想用第一、二種寫法時，事件名稱需要加上on為前綴。
第一種需要每個元素都加上相對事件，但這樣管理綁定事件的元素很不容易，再來寫在屬性看起來跟使用方法很像，不過有個問題是沒辦法為同個事件寫多個流程。
多個流程像是想要做到連續的函式流程，但是寫在屬性的話，這麽做等於是覆蓋第一個事件的函式：

document.querySelector('button').onclick = (event)=>{}
document.querySelector('button').onclick = (event)=>{}

第三種是較常使用，而且也比較推薦的寫法，本文也會以第三種來介紹。

addEventListener

addEventListener()的方法可以在元素上監聽，當事件傳遞到該元素時，它就會呼叫並執行函式。這種方法可以用在每個event target上面。當監聽器已經綁在指定元素上，並且不會重複執行相同的動作，有多個事件需要處理時，就會照它們觸發的順序依序執行。

在事件監聽的這個方法中，有三個參數：addEventListener(type, listener, options)

• 第一個值是想要被綁定的事件類型，例如想要在按鈕點擊就執行，事件的類型為click。
• 第二個函式是一個callback function，當第一個參數的條件被滿足，才會執行函式，括號中的參數只會接受event。
• 第三個則是一些可選的項目，其中一個屬性是capture，設參數為true或false決定事件是在捕獲還是冒泡階段執行，預設上是false，也就是預設上在冒泡階段執行，這也是為什麽我們不更動它的話，通常執行順序從最裡面的元素目標到最外層的容器，如果設定為true，就會在捕獲階段執行。

removeEventListener

使用removeEventListener()可以移除已經添加的事件。在刪除事件時，寫法跟addEventListener()一樣，括號中的參數也需要一模一樣。

document.querySelector('button').addEventListener('click',test)
document.querySelector('button').removeEventListener('click',test);

預設事件

瀏覽器本身會有一些預設的事件，比方說點擊表單的確認按鈕，就會觸發傳送的效果。

停止事件發生

event.preventDefault()

如果我們不想要這些預設事件跟addEventListener()設定的事件同時發生，可以使用event.preventDefault()取消。

<input type="checkbox"/>

const checkbox = document.querySelector("input[type=checkbox]");

checkbox.addEventListener("click", ()=>{
  event.preventDefault();//使用之後，checkbox就不會被切換狀態
});

event.stopPropagation()

event.stopPropagation()完全停止事件向上冒泡，也就是說元素目標一旦停止工作，從父層開始的事件都會被停下來，但是預設事件仍然會繼續被使用。

因此，所以在我之前不熟的時候，使用之後莫名的讓目標元素停止工作後，導致我的父層委派停止運作，未來會更謹慎的使用。

References

Event delegation

• MDN

1. EventTarget: addEventListener() method
2. EventTarget: removeEventListener() method