事件

指的是在 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 选取元素
最後做了一个综合练习～
这是我的学习纪录，有任何问题欢迎传讯息给我
我们下次见！