[ week 7 ] 前端必備 JavaScript


Posted by vick12052002 on 2020-07-27

寫程式不外乎三個層面:
介面:如何改變介面( 改變 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 添加到冒泡階段

事件傳遞兩大原則

  1. 先捕獲,再冒泡
  2. 當事件傳到 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


#DOM #事件處理 #冒泡與捕獲







Related Posts

[Release Notes] 20210222_v1 - Refined Main site dark mode style

[Release Notes] 20210222_v1 - Refined Main site dark mode style

MTR04_1007

MTR04_1007

初探Robot Framework之Keyword設計原則 - 06

初探Robot Framework之Keyword設計原則 - 06


Comments