###### tags:`ALPHACampWeek3` element.addEventListener 監聽事件 === 使用監聽事件的好處 --- 1. 觸發事件的元素和監聽對象的不必要是同一個，我們監聽的是父元素 #controller，實際被點擊的元素是子元素 btn。 2. 第二個好處非常重要，我們在後面的實作中會介紹背後的 bubbling 原理。 事件監聽函示擺放位置 --- ```javascript= element.addEventListener('click', greeting) // handler function greeting() { alert('handling event') } ``` - 也可以使用匿名函數 ```javascript= element.addEventListener('click', function () { alert('handling event') }) ``` 釋放記憶體 --- 不用的時候可以釋放記憶體減少負擔 - 一般建議使用有名字的函數來命名 ```javascript= element.removeEventListener("click", handler) ``` # 常見監聽事件 滑鼠事件 --- ``` click - 鼠標點擊元素 mousemove - 鼠標滑過元素 mouseout - 鼠標離開元素 ``` 鍵盤事件 --- ``` keydown - 點擊且長按一個鍵時 keyup - 放開按鍵時 ``` 表單事件 --- - 你的行為會受到 DOM 物件FormElementInterface 監控 ``` submit - 提交表單時 focus - 點擊某個輸入框時 input - 輸入框內容改變時 ``` document 事件 --- - 在實務上除了注意檔案引入位置(避免出現在HTML前)，在 JavaScript 時還會再包一層 DOMContentLoaded，確保萬無一失。 ``` DOMContentLoaded - 當 HTML 下載完成並完整的建立 DOM 模型時觸發 ``` 監聽事件參考資料 --- https://ithelp.ithome.com.tw/articles/10192015