這次來講解addEventListener這個API是如何使用的吧!在未來幾天也會持續介紹關於addEventListener可以用的事件大概有哪些!

addEventListener

總共有三個參數可以使用，用法如下:

element.addEventListener('事件',function(){
  // do Something
},option)

第二個參數

我們先跳過第一個觸發的事件，先來說明第二個參數，為事件觸發後要執行的程式碼，通常是一個函式，當然也可以直接呼叫函式像是

element.addEventListener('click',hello) //點擊元素後會觸發hello這個函式

function hello(){
console.log('hello') 
}

第三個參數

第三個參數原本是由一個Boolean值來決定，
如果是true => 事件捕獲
如果是false => 事件冒泡
那都沒有設定的話，預設就是走事件冒泡

但在之後新增了兩個更詳細的資訊可以設定

element.addEventListener('事件',function(){
  // do Something
},{
  once: true,
  passive: true,
  capture: true
})

once

如果有設定此參數的話代表這個addEventListener只能被觸發一次

passive

設定成true的話，表示event.preventDefault()這個方法不會被呼叫，如果在addEventListener一樣有寫這個方法的話會忽略掉並且在console出現警告訊息

capture

就是原本的捕獲或冒泡機制，true表示使用事件捕獲，false則為事件冒泡

今天就說到這邊，明天會來介紹event.preventDefault()以及event.stopPropagation()!