參考資源

• HTML DOM Events

event 物件 - 告知你當下物件資訊

clientX clientY : 使用者點擊時的座標，可以試著點擊右上角和左下角觀察變化。

EX

addEventListener

addEventListener(1,2,3)

• 1 : 選擇事件 click change
• 2 : function
• 3 : boolean - 預設是 false

EX-1

綁定事件語法差異

onclick : 同一個物件綁定多次，只會執行最後一次。

addEventListener : 同一個物件綁定多次，都會執行。

EX-2

Bubbling & Capturing

false : 從指定元素往外層 — 事件氣泡 (Event Bubbling)

true : 從外層找到指定元素 — 事件捕捉 (Event Capturing)

EX-3

stopPropagation

解決元素重疊情況不在延伸尋找

EX-4

preventDefault

取消預設觸發行為

EX-5

event.target.nodeName

抓取現在點擊了哪一個元素

EX-6

addEventListener - change

選單內容改變時，在下方秀出資料 ～

EX-7

keydown、keyCode

使用按鍵 1 2 3 4 5 來做到動畫效果

Launch Rocket

event - blur

focus : 所在焦點

blur : 離開焦點

加入判斷出現 空值 中英字 符號 時給予 alert 提醒告知使用者

顧客點餐

event - mousemove

querySelectorAll : 傳回的是一個陣列

Don’t touch square

網頁座標 screen、page、client

screen : 整個螢幕解析度

page : 整個網頁的寬高

client : 瀏覽器視窗畫面的寬高

EX-8

事件監聽優化 - 從父元素來監聽子元素內容

EX-9