[ week 7 ] 前端必備 JavaScript

寫程式不外乎三個層面：
介面：如何改變介面（改變 UI 畫面）
事件：如何監聽事件並作出反應（點擊按鈕觸發事件，因而改變介面）
資料：如何與伺服器交換資料（將資料送到後端）

DOM 文件物件模型

就像是把 html 文件看成一棵樹，主樹幹是整份文件 document，而每個 Element 元素就代表一個節點（就像分支），透過讓 JS 綁定監聽事件，來動態操作 html 裡的元素樣式（網頁介面）

DOM操作

document.getElementById('idName')

document.getElementsBytagName('tag')

document.getElementsByClassName('className')

如果是id記得要加＃，如果是class name 記得要加.
document.querySelector('selector')

document.querySelectorAll('selector')

innerText : 選取元素中的文字內容 較常用

innerHTML : 以 HTML 的文件選顯示，選取元素中的內容（不包含自己） 較常用

outerHTML : 以 HTML 的文件選顯示，選取元素中的內容（包含自己）

appendChild :新增元素，到指定的 DOM 節點上

removeChild : 刪除元素，到指定的 DOM 節點上

event listener 事件監聽

addEventListener('click', function(),ture)

addEventListener可帶三個參數：

第一個參數－事件：可以是 on、click、keypress 等等，事件類型可參考 MDN-事件参考

第二個參數－callback function ：偵測事件，觸發該 function ，可使用匿名函式的形式

第三個參數－Boolean：true 或 false，預設為 false，true 是把這個 listener 添加到捕獲階段，false 則是listener 添加到冒泡階段

事件傳遞兩大原則

先捕獲，再冒泡

當事件傳到 target 本身，沒有分捕獲跟冒泡

根據DOM 的事件傳遞機制：捕獲與冒泡文章提到

true 代表把這個 listener 添加到捕獲階段，
false 或是沒有傳就代表把這個 listener 添加到冒泡階段，預設。

anonymous 匿名函式：由於 function 並沒有命名，因此叫做匿名函式，它與 callback function 一點關西都沒有！

callback function 回呼函示：常會寫在監聽事件上，一旦事件觸發，就會使用這個function

window 是整個視窗、document 是整份文件

e.preventDefault 阻止瀏覽器預設動作，常用在 submit 表單上、超連結

事件傳遞機制捕獲與冒泡

以下引入文章內容(DOM 的事件傳遞機制：捕獲與冒泡)[https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/]
當事件傳遞到點擊的真正對象，也就是 e.target 的時候，無論你使用addEventListener的第三個參數是true還是false，這邊的 e.eventPhase 都會變成AT_TARGET。

既然這邊已經變成AT_TARGET，自然就沒有什麼捕獲跟冒泡之分，所以執行順序就會根據你addEventListener的順序而定，先添加的先執行，後添加的後執行。

阻止冒泡

stopPropagation()：傳遞到 e.target 時，事件將會停止傳遞，最終停留在 e.target

stopImmediatePropagation():當物件綁定兩個 addEventListener，如果在第一個addEventListener 的 function 內加上 stopImmediatePropagation()，第二個 addEventListener 就不會觸發

事件代理 event delegation

event delegation ：運用事件傳遞機制中的冒泡，在 e.target 的上層增加addEventListener，再運用判斷式取得 e.target 的指定資料，好處就是不用每個相似的物件都綁定addEventListener，是一個比較有效率的做法，而且不用浪費資源，加上可以處理動態新增元素或class name的情形

資料來源：
Day03-深入理解網頁架構：DOM