鐵人賽 Day 12

Javascript Event

為什麼要理解事件機制？

JS 是事件驅動的語言，意思是 JS 的程式碼雖然會在網頁載入時被讀取，有一些程式要觸發事件才會發揮作用，像是提醒視窗不應該在沒有任何動作的時候出現，應該要使用者要離開網頁的時候等時機再出現。

事件發生的兩種機制

1.事件冒泡 (Event Bubbling)
觸發事件的結點由下至上傳遞事件至最上層節點 document
2.事件捕捉 (Event Capturing)
與冒泡相反從 最上層節點 document 往下傳遞事件到觸發事件的元素節點

兩種事件機制在事件發生時都會，先從事件捕捉開始由上往下再從下而上。

補充：之所以會採用兩種機制是因為以前兩種瀏覽器Netscape（使用事件捕捉） 和 IE （使用事件冒泡，之後為了統一標準而妥協選擇兩種都用。

reference:https://stackoverflow.com/questions/17564323/what-does-the-third-parameter-false-indicate-in-document-addeventlistenerdev

事件註冊綁定

• 網頁元素綁定事件
  window.addEventListener('click',function1(){},false)
  三個參數分別是 事件名稱、事件處理器、事件傳遞機制（冒泡/捕捉）

• 移除綁定事件
  window.removeEventListener('click', function1)
  兩個參數是 事件名稱、原先綁定的事件處理器

事件的種類

• 滑鼠事件
• 鍵盤事件
• 網頁介面事件
• 表單相關事件

網頁相關事件

• load 事件 全部網頁資源仔入完畢(包括 CSS、JS)
• resize 事件 (尺寸相關元素改變)
• scroll 事件 (捲軸被拉動)
• DOMContentLoaded 事件 (DOM被完整讀取與解析後，類似 load 事件，但比 load 更早)
• fullscreenchange事件 (全螢幕或是還原視窗)

事件物件 (Event Object)

除了有監聽事件的 EventListener ，還有處理事件的 EventHandler，
當監聽的事件發生時 EventListener 會建立「事件物件」傳給 EventHandler。事件物件裡有很多屬性以下介紹常見的。

event.preventDefault()

HTML 有些元素有預設行為，例如<a>會跳轉連結，此時若是想中斷預設行為改做其他事就可以使用。

event.stopPropgation()

上述的 preventDefault()只能停下預設行為不能停止事件傳遞，而 stopPropgation()即是用來阻止冒泡傳遞

event.target 和 event.currentTarget 差異

在 EventHardler 裡面要是想操作觸發事件的元素 可以用 this

btn.addEventListener('click',function(){
    console.log(this.type)
},false)

這裡的 this 指的是"觸發事件目標"的元素也就是 event.currentTarget而不是 event.target

兩者最主要的差異在於冒泡階段 event.currentTarget 會跟著事件一起傳遞，而 event.target就是指發動事件的元素，意即事件捕捉階段 target 和 currentTarget 指的完全相同。