用法

①透過特定event觸發動作

用法基礎篇

目標物.addEventListener("特定的event", 
 function(){
  //這邊寫要觸發的動作
 }
)

②操控目標元素完成某動作

用#button按鈕操控，讓超連結#theURL被點擊

a#theURL(href="ianchen.thisistap.com") 超連結
br
button(onclick="openURL()") click it and open the URL
//onclick的用法參見下方

function openURL(){
 theURL.click();
}

Display

超連結
click it and open the URL

③ON+EVENT名稱：用HTML直接呼叫 function

基礎範例

HTML用法：on+event名=”函式名()”
※如果要呼叫event的話，需要使用這種形式：on+event名=”函式名(event)”

【例如】click event & makeItBigger function
→onclick="makeItBigger()" 
//這個東西放在HTML tag裡面
//記得要另外寫makeItBigger這個函式

【上述用法等同】
id.eventListener("click", makeitBigger());

滑鼠相關監聽事件

1. click event：滑鼠按下→觸發事件
2. mousemove event：滑鼠移動→觸發事件
3. mousedown event：滑鼠按下去的瞬間→觸發事件
4. mouseout event：滑鼠離開→觸發事件
5. mouseup event：滑鼠按下、離開的瞬間→觸發事件

打字相關監聽事件

1. focus event：聚焦（點選到）該元素→觸發事件
   ※可以用滑鼠點選觸發focus，某些情況下也可以用鍵盤選取（Tab鍵），觸發focus
2. blur event：focus的相反，離開該元素後→觸發事件
3. keydown event：鍵盤按下時→觸發動作
4. keyup event：鍵盤按下後鬆開→觸發動作
5. input event：輸入文字→觸發動作

其他監聽事件

1. transitionend event：漸變結束後→觸發事件
2. change event：<input>狀態改變時→觸發事件
   【例】下拉式選單：變更選項→觸發事件
   【例】核取方塊：勾選 / 取消勾選→觸發事件