今天我們要一一介紹如何在網頁元素綁定事件。

on-event 處理器 (HTML 屬性)
在 HTML 裡面，想要支援某個事件的話就可以使用 on 加上事件的屬性來綁定：

<button id="btn" onclick="alert('hi');">click</button> 

我們透過 onclick 屬性就可以在 button 上面綁定 click 事件，當我們按下這個元素的時候就會執行 alert('hi') 這段程式碼。不過現在基於程式碼的重複使用性以及維護性考量，不建議使用這種方法了。

on-event 處理器 (非 HTML 屬性)
像是 window or document 沒有實體元素的時候，我們一樣可以使用 on-event 來處理事件：

window.onload = function() {
    document.write("hi")
}

上面程式碼會在 window 觸發 load 事件執行對應的內容，如果有實體元素的話，可以先用 DOM api 選取到物件後，在用 on-event 來處理事件：

<button id="btn">click</button>

let btn = document.getElementById('btn')
btn.onclick = function(){
    console.log('hi')
}

想要解除事件的話：

btn.onclick = null

監聽事件 addEventListener()
基本上有三個參數：

1. 事件名稱
2. 事件處理器 (事件觸發後的 function)
3. 布林值

用這種方法來註冊事件的優點是，可以重複指定多個處理器給同一個元素同一個事件：

let btn = document.getElementById('btn')

btn.addEventListener('click', function(){
    console.log('hi')
}, false)
btn.addEventListener('click', function(){
    console.log('hey')
}, false)


//點擊後印出
// "hi"
// "hey"

如果要解除事件註冊的話，使用 removeEventListener()：

let btn = document.getElementById('btn')

// 把 event handler 拉出來
const clickhandler = function(){
    console.log('hi')
}

const clickhandler2 = function(){
    console.log('hey')
}

btn.addEventListener('click', clickhandler, false)
btn.addEventListener('click', clickhandler2, false)

這樣我們點擊 button 一樣會出現 hi 跟 hey
如果我們要移除 handler 的話，如下：

btn.removeEventListener('click', clickhandler)
btn.removeEventListener('click', clickhandler2)

這樣我們在點擊 button 就沒有 hi 跟 hey 會印出來了！

以上就是註冊或綁定事件的方法，明天見啦！