前言

一開始在接觸DOM的時候，最重要的就是認識addEventListener()，很簡單地使用就可以達成很多互動。

但是一剛開始學的時候都是仿照別人的寫法去照著寫，其實也不太懂，所以想要來稍微研究一下～

EventTarget.addEventListener() 在做什麼？

EventTarget.addEventListener()是他的全名，前面可以放一個eventTarget，就是你要在監聽哪個target的意思。

addEventListener()會替eventTarget註冊一個事件監聽，一旦eventTarget發生了某件我們設定的event，就會執行後面的function（通常會說是一個EventHandler，這個事件發生之後的處理function。）

eventTarget可以是個element, window, document..
event有非常多種事件，除了最常使用的clickEvent 還有 changeEvent, mouseEvent, touchEvent, scrollEvent...可以去MDN看

這裡做了一個簡單的範例：

1. 用querySelector選取button
2. 再對這個button監聽click 事件
3. 只要click就改變button上的字樣，從原本的 Click me! 變成 already click：
   html:

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

javaScript:

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

btn.addEventListener("click", clickHandler);

function clickHandler() {
    btn.textContent = "already click";
}

接下來介紹除了addEventListener()還有一個比較舊的叫：on-event也可以達到同樣的效果～

addEventListener() v.s on-event

同樣上面的code也可以直接寫在html上，叫做onEvent，雖然可以達到同樣的效果，但兩者還是有滿大的區別。

• onclick 可以直接寫在html上，也可以寫在<script>裏面

寫在html上：

<div class="btn-container">
  <button class="btn" onclick="clickHandler()">Click me!</button>
</div>

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

function clickHandler() {
    btn.textContent = "already click";
}

• 寫在<script>裡面：

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

btn.onclick = clickHandler;

function clickHandler() {
    btn.textContent = "already click";
}

當然寫在<script>當然比寫在html上更靈活，可以寫匿名函式，也可以控制scope。

比較onclick寫在html上與addEventListener()不一樣的地方：

• 兩者所在的位置很不一樣，onclick可以放在放在要執行的html tag上，所以也不用像上面一樣要先把他選起來。
• 還有一個很大的不一樣就是在addEventListener()裡面的function是沒有括號的，但是在html 的onclick的時候卻是有括號的。

有沒有括號在於是否被呼叫。

由於addEventListener()是替 eventTarget 註冊這個event發生之後要做什麼，但是他的位置是在<script>裏面，所以當執行順序下來遇到了addEventListener()，對他來說不是註冊事件，而是直接呼叫了這個function，他就會直接去執行了，就不會有點擊才會產生的效果。

onclick存在的位置就是在html上面，像是一個屬性，所以不會像<script>的執行順序就直接被呼叫。

來看看MDN寫的：

• 事件監聽器是指通過註冊的函數或對象EventTarget.addEventListener()。
• 事件處理程序是指通過on...屬性或屬性註冊的函數。

為什麼要用addEventListener()

一樣的事件，但是變成兩個function，要做兩件事情：換字、換背景色：

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

function changeColor() {
btn.style.backgroundColor = "pink";
}

成果：

• onclick無法重複註冊事件：

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

<script>
  btn.onclick = changeChar;
  btn.onclick = changeColor;

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

  function changeColor() {
    btn.style.backgroundColor = "pink";
  }
</script>

因為一次只能執行一個事件，變成只有執行最後一個換背景色，前一個換字的就沒有動作，這是因為如果使用onclick的話，後面的事件會覆蓋前面的。

onclick雖然寫兩次綁兩個function去執行，但如果把這兩個function都放在同一個function就可以囉！

• addEventListener()就不會被後面蓋前面：

<div onclick="clickHandler()" class="btn-container">
  <button class="btn">Click me!</button>
</div>

<script>
  const btn = document.querySelector(".btn");

  btn.addEventListener("click", changeChar);
  btn.addEventListener("click", changeColor);

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

  function changeColor() {
    btn.style.backgroundColor = "pink";
  }
</script>

兩個都有被執行到：

小結

• onclick 無法綁兩次事件，後面會覆蓋前面的
• addEventListener有event事件，可以阻止預設行為，阻止冒泡等等很多可以控制事件。

今天先這樣拉！明天再繼續聊addEventListener()~

快救救我吧.......
快要撐不下去>_<

參考資料：
35: What Are Event Listeners In JavaScript | JavaScript Events | JavaScript Tutorial | mmtuts
addEventListener vs onclick