前言

昨天大概知道 addEventListener()在幹嘛之後應該玩得不亦樂乎吧？！
其實他不只這樣，除了click之外還有更多的event可以去監聽，也不只有兩個參數可以添加，今天主要講第一二個參數在做什麼～

參數

MDN:

addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)

昨天我們只有用到兩個參數，就是type, listener。

Event

type 就是click, mouseenter, mouseleave...

不知道為什麼這些 type 都沒有駝峰？總之自作聰明不用幫他駝峰，他就是長這樣。

Listener

listener 就是 event listener callback，像昨天說的寫一個 callback function 在裡面控制當event 發生的時候要做什麼事情。

昨天沒說到的是這個function可以傳一個參數，叫做event。

Listener 的參數 event

我們來試試看把昨天的 function 加上參數event並印出來：

<div class="btn-container">
  <button class="btn">Click me!</button>
</div>

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

btn.addEventListener("click", changeChar);

function changeChar(event) {
    console.log(event);
    btn.innerHTML = "already click";
}

印出來可以看到event有一～～大堆東西～這些都是event的屬性，使用event.XXX就可以拿得到他們的的值。
看看右邊的target就是我們的EventTarget: button!
可是左邊的currentTarget是什麼呢？

event.target v.s event.currentTarget

e.target指的是被監聽的 target
e.currentTarget指的是現在按到的 target

我這裡做一個範例：

• 最外層的container，包著一個box, 一個button

<div class="container">
    <button class="btn">click</button>
    <div class="box">box</div>
</div>

• 監聽事件綁在container身上

const container = document.querySelector(".container");

container.addEventListener("click", function (e) {
    // ...
});

因為是綁在container身上，所以在container裡面的東西也都會連帶包含，
event.target會一直是container，但event.currentTarget就會不一樣了。

以下是我做的範例成果，看看點到不同東西的event.target、event.currentTarget是什麼：

• 點擊container的時候event.target、event.currentTarget都是container
• 點擊button的時候event.target依然是container、event.currentTarget則是 btn
• 點擊box的時候event.target依然是container、event.currentTarget則是 box

範例codepen: https://codepen.io/Jadddxx/pen/jOxeBRQ

其實event裡面的屬性還有很多東西可以使用，依照使用情境會拿不同的屬性值出來用，
不過最常用到的應該就是這兩個吧！

總結

• addEventListener() 第一個參數放 event
• addEventListener() 第二個參數放 callback function
  • callback function(event)可以傳event參數(要叫什麼都可以，e / event..）
    • e.target指的是被監聽的target
    • e.currentTarget指的是現在按到的target

後記

所以現在第一二個參數都講了，還剩下第三個最複雜的一個～
但是明天可能需要先講事件的傳遞捕捉跟冒泡事件，才能講到第三個辣個神秘的參數

寫到現在發現我很愛寫比較的部分ＸＤ

• class v.s construcror
• node v.s element
• event.target v.s event.currentTarget

其實addEventListener()很早就學到了，也一直在使用，可是這次研究下來發現根本還有很多都不懂！然後參考資料幾乎都是看MDN的，也很難整理出來，哎！

快救救我吧...

參考資料：
MDN
[ JS筆記 ] e.target 與 e.currentTarget 的差別