[Day15] JavaScript - JavaScript 事件與事件處理 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 15

Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列第 15 篇

[Day15] JavaScript - JavaScript 事件與事件處理

11th鐵人賽

Vita Ora

團隊Amos的推坑教2.0

2019-09-30 21:15:01

2848 瀏覽

大綱

事件 (Event) 與事件處理程序 (Event handler)
常用的 HTML 事件

事件與事件處理程序：事件處理模式
事件 (Event) 對動態網頁的撰寫是相當重要的，那麼如何綁定事件呢 ? 簡單來說，有幾項是我們必須要考慮的事項。

觸發哪種事件：觸發事件的類型，例如是當滑鼠移動時或者按下按鍵時觸發事件時觸發事件。
事件影響的範圍：知道觸發何種事件之後，我們還要了解事件影響的範圍，例如想對整個網頁都有效，則事件要加在 <body> 標籤內，如果只對某物件有效，則事件需加在該物件。
觸發後的處理：觸發之後要如何進行後續處理，也就是『事件處理程序 (Event handler)』，舉例來說，我們想要知道使用者是不是按下了按鈕，首先必須在按鈕綁定事件，並撰寫事件處理方式。

JavaScript 綁定事件有三種方式：

行內綁定：直接將事件屬性綁定在 HTML 元件上，例如底下敘述，在按鈕綁定 onclick 事件，當按鈕被點擊之後就會觸發函式 send()。
在 JavaScript 敘述綁定：同樣是將事件屬性綁定在 HTML 物件，不過是透過 JavaScript 來綁定。
綁定事件監聽函式：以 addEventListener 方法來綁定，語法如下：target.addEventListener(event, listener[, useCapture]);
event：要監聽的事件，例如 click
listener：事件觸發後要執行的函式
useCapture：布林值，預設值是 false，可省略，指定事件是在捕獲階段執行或冒泡階段執行。true：捕獲階段執行 ; false：冒泡階段執行。

補充說明：addEventListener() 方法裡的事件不需要加『on』，例如按一下滑鼠左鍵是 click 而不是 onclick。

事件與事件處理程序：冒泡 (bubble) 與捕獲 (capture)
冒泡與捕獲是一種事件傳遞引發的現象，會發生在父元素與子元素都綁定相同的事件時發生，當子元素事件被觸發的時後，父元件的事件也會被觸發，觸發的順序是子元素到父元素 (由內而外) ; 捕獲觸發的順序與冒泡相反，觸發的順序是由外而內。

常用的 HTML 事件：Load 與 Unload 的處理
使用 JavaScript 操作 HTML DOM 時，必須先確定操作的元素已經被載入了，再來處理，否則就很容易出錯，最好養成利用 window 及 Document 提供的載入相關事件把關，確認 DOM 都載入之後再執行 JS 的好習慣。
確認網頁載入的方式有下列兩種方式：

window.onload
偵聽 Document 的 DOMContentLoaded 事件：藉由改變 JavaScript 的載入方式也能讓網頁資源先載入，這個部份稍後會說明到，我們先來看 load 與 DOMContentLoaded 事件

window.onload：
load 事件是在網頁所有資源載入完成時觸發，下列是使用 onload 事件處理程序屬性，語法如下：

window.onload = (event) => {
  ...
};

或者，使用事件偵聽，語法如下：

window.addEventListener('load', (event) => {
  ...
})

偵聽 Document 的 DOMContentLoaded 事件：
DOMContentLoaded 事件是當 document 被完整的讀取跟解析之後就會被觸發，不會等待 CSS、圖片或其他資源，語法如下：

document.addEventListener('DOMContentLoaded', function() {
  ...
});

Load 事件與 DOMContentLoaded 事件比較如下：

補充說明：
改變 JavaScript 的載入方式：
JavaScript 程式碼的載入會因為放置的位置不同而有差異，JavaScript 程式碼如果放入 html 的 head 裡面，那麼網頁載入之前 JS 就會被載入執行，如果放在 body 裡面，則會按照頁面由上到下依序載入執行，所以我們可以把 JavaScript 程式碼放到頁面底部，JS 就會最後才載入 (放在 </body> 之前)。