事件監聽 addEventListener

.addEventListener('事件名稱', callback function)

• 沒有名稱的函式叫做匿名函式（anonymous function）

事件有很多種，包含：click、keyDown、onclick、mouseover、mouseout、mousemove。

callback function

在 addEventListener 裡，簡單來說就是監聽某一事件，當事件發生，會呼叫（callback）的 function。

event(e)

在事件監聽函數中，其實會預設傳入一個參數 e，我們來看看 e 是什麼。

程式碼：

let element = document.querySelector('.block')
element.addEventListener('click', function(e){
  console.log(e)
})

結果：

是一個「事件物件」

可以看到滑鼠點擊的位置（clientX、clientY）...等等關於這個事件的資訊。

• e.target 代表該事件鎖定的元素，在 click 中，就代表被點的元素

範例程式碼：

let element = document.querySelector('.block')
element.addEventListener('click', function(e){
    console.log(e.target)
})

當我點擊不同區塊的時候會 log 出我點中的元素：

監聽 keydown（鍵盤按鍵）

針對整個瀏覽器的 window 監聽按鍵的 ascii code，並轉譯成字元。

window.addEventListener('keydown', function(e){
  console.log(String.fromCharCode(e.keyCode))
})

透過事件監聽來改變 CSS 元素

當按下「提交」按鈕的時候，頁面的背景顏色會變紅色，再按一次會變回白色。

原本：

按下「提交」按鈕:

HTML:

<div class='block'>
  <input type="text">
  <button type='submit'>提交</button>
</div>

CSS:

.active {
  background-color:red;  
}

JS:

document.addEventListener('DOMContentLoaded',function(){
  let element = document.querySelector('.block > button')
  
  element.addEventListener('click', function(e){
     document.querySelector('body').classList.toggle('active')
  })
})