Web Development 網站開發 (6) - Javascript 事件監聽以及操作 DOM

開發網站其中一項最主要的功能就是偵測網頁上元素的各種事件並對其做出響應。比如說你按了一下網頁中的某個按鈕，然後發現網站上的一些內容因為你的點擊而改變了，這個行為就需要 Javascript 來幫忙達成。

事件監聽 Event Listener

事件監聽聽的是什麼？就是聽用戶與網頁的互動。譬如用戶對網頁某個按鈕的點擊、對網頁某個輸入框的輸入，以及網頁的頁面滾動等等。

以下為按鈕點擊事件監聽的三種用法：（點擊出現的alert在嵌入式版本的 Codepen 會顯示不出，建議點擊右上的圖示去 Codepen 網站操作）

See the Pen Button Click Event Listener by Hua-Ying Tsai (@huaying) on CodePen.

裡面的 Javascript 帶到了一些程式的基礎像是變數及函式宣告。 const x = 1  這個就是一種變數宣告，告訴程式說我要宣告一個變數 x 去存放數字 1。程式的 = 是 assign 的意思，是把等號右邊的資料 assign 給左邊，與數學的等號不一樣。

至於函式 (function) 的概念是定義一個可以重複呼叫的一段邏輯。解釋如以下例子：

// 定義了一個 function 名為 foo，function 裡的邏輯直到被呼叫的時候才會執行
function foo() {
	const a = 1;  // 變數 a 宣告為 1
    alert(a);     // 彈出一個視窗訊息為 "1" 
}

foo(); // 呼叫 foo，第一次執行
foo(); // 呼叫 foo，第二次執行

操作網頁上的元件 (DOM Element)

DOM 的全名是文件物件模型 Document Object Model，白話文來說就是 HTML 裡頭不同 tag 以及其包含的內容在 Javascript 裡的表示。

例如 <button>Button</button> tag 為 button 是一個按鈕的 DOM Element。

HTML 是用樹狀結構來表示，意味著每個 DOM Element 是可以有它的 Parent 以及 Children DOM Element 的。例如：

<!-- 
  這個 id=parent 的 dom element 有兩個 children dom，
  分別為 id=hello 以及 id=world 的 div -->
<div id="parent">
  <div id="hello">Hello</div>
  <div id="world">World</div>
</div>

當我們可以在 Javascript 裡表示出網頁裡的元件，也代表我們能對這些元件進行新增刪改等操作以及事件監聽。

查找 DOM Element

最常用的有 getElementById 與 querySelector，前者是用 id 去取得 DOM，後者是用之前介紹的 CSS Selector 去獲取 DOM。

範例：

// 以下可以拿到 <button id="button1">Button</button> 這個 HTML 的 DOM
// HTML 裡每個 id 要是唯一的，不要重複定義。
document.getElementById("button1");

// 以下用 CSS Selector #button1 去找 DOM，因為 #button1 也是 id = button1 的意思，所以跟上面 getElementById 是一樣的
document.getSelector("#button1");

除此之外當然還有其他方法可以找 DOM，有用 tag 去找也有用 class name 去找的這裡就不一一介紹。

從 DOM Element 獲取及修改內容

拿到 DOM 以後的下一步就是要查看內容及修改，這時候可以用 innerHTML、textContent 等去取值以及修改。innerHTML 以及 textContent 最主要的差別就如字面上解釋，前者是拿 HTML content，所以回傳資料會包含 HTML 的 tag 像是 <div> 等，而後者是只會傳文字內容，不會包含 <div> 等 tag。

範例：

// 用 innerHTML or textContent 可以拿到 <div id="content">Content</div> 這個 DOM 的內容 (Content)
document.getElementById("content").innerHTML; // Content

// 把原本的 Content 改為 New Content
document.getElementById("content").innerHTML = "New Content"; 

加減小程式

知道了事件監聽跟 DOM 的操作後，我們就可以試著做一些應用。這個加減小程式裡包含了加減按鈕以及當下的結果。當使用者點了加或減的按鈕，我們的 Event Listener 會監聽到點擊事件並執行以下邏輯：

1. 把當前值用 innerHTML or textContent 取出來
2. 因為取出來的值為字串，我們用 parseInt 把他轉為數字
3. 把這個數字做 +1 or -1 當作新的結果
4. 把新的結果用 innerHTML or textContent 存回原本的 DOM 裡

See the Pen Plus and Minus by Hua-Ying Tsai (@huaying) on CodePen.