Lichen5221
commented
3 years ago JavaScript 網頁事件處理
eventListener
const element = document.querySelector('#block')
element.addEventListener('click', onClick) // 事件為按一下
function onClick( ) {
alert('click!')
}在元素上面增加事件，當有事件發生後，會執行後面的函式。
callback function 回呼函式
越講越模糊，老師螢幕上那個他又說是匿名函式，跟 callback function 沒有任何關係，現在又說那就是 callback function ？
因為不知道使用者什麼時候會觸發事件，所以透過監聽事件來準備呼叫函式，這整個叫做回呼函式？
Callback function 其實就是一般的函式，差異只在 Callback function 是在指定時機才觸發的 function，你可以在指定的時候，做完某件事情的時候才呼較的函式，所以一句話來說，如本文標題，就像是：「待會叫你」。
所以是執行函式的方式為回呼函式，但老師寫的方式叫做匿名函式。
event(e)
可以透過 console.log(函式裡面的參數名稱) 來檢視瀏覽器執行函式裡面的東西，有許多資料可以從中取得。
FE102 Javascript
介面、事件與資料
執行 JavaScript 的一百種方式
DOM（Document Object Model）是什麼？
使 JavaScript 和 瀏覽器 之間有個橋樑。
將 html 文件變成跟物件類似的東西，讓 JavaScript 可以讀取。
getElement
瀏覽器將許多指令放在 document 中，所以使用時必須加上 document. 。
script 放的位置會影響執行順序， html 檔為由上而下跑，若將 script 放在前面，卻標定後面的東西，就會呈現空陣列（因為還沒讀取到）。
可直接抓取符合指定 class 名稱的元素。
使用方法即跟 CSS Selector 的方式一樣，可以支援更複雜的元素選擇。
改變元素的 CSS
通常不會這樣做，讓版面太複雜，會透過多寫一個 .active { } 的 Class ，將 CSS 樣式寫在該處，而非寫在 JavaScript 程式碼中。
改變元素的 Class
remove 去除指令，可刪除 class。
toggle 開關指令，本來沒有會變成有。
改變內容 inner outer 的 HTML & text
appendChild & removeChild
要刪掉某元素時要知道上一層是誰， HTML 有階層關係。
如果並非該層底下的元素，則不會移除。（網頁將由上往下檢查執行）