事件

指的是在 DOM 上所發生的事件，換句話是可以是特定的動作被觸發後，必須要執行對應的事情。
（如：點選某某功能、按下 ESC 鍵，就是觸發執行某件事。）

一個事件可以是由使用者的操作行為所產生（如：點擊滑鼠按鈕或敲打鍵盤），或是來自 API 因處理非同步任務所產> 生。事件也可以為程式所觸發

監聽事件 - addEventListener()

是指指定的 DOM 元素，綁定指定的事件
以下面的範例，是在 btn 中綁定 click 事件，
意指「點選按扭時，則在 console 出現 "被點了一下"」

<button class="btn">點我一下！</button>

const btn = document.querySelector('.btn'); 

// 在 btn 上綁定 click 事件，滑鼠點一下後會出現訊息
btn.addEventListener('click',function(e){
  console.log('被點了一下！');
  
})

結果

綜合練習

建立一個每次點一下就 + 10 的功能鍵，並且將增加的數字顯示於畫面上

<button class="btn">+10</button>
  <p class="num">0</p>

const btn = document.querySelector('.btn');
const num = document.querySelector('.num');

let total = 0;

btn.addEventListener('click',function(e){
      total += 10;
  // console.log(total);
  num.textContent = total;
  
})

結果
點一下為 10，點兩下為 20

參考資料及學習資源

• Event reference
• 0 陷阱！0 誤解！8 天重新認識 JavaScript！
• JavaScript 指南
• 六角學院 - JavaScript 必修篇 - 前端修練全攻略

本日小節

今日練習事件監聽，再加上前面的 DOM 選取元素
最後做了一個綜合練習～
這是我的學習紀錄，有任何問題歡迎傳訊息給我
我們下次見！