addEventListener 事件監聽

1. JavaScript 是一個事件驅動 (Event-driven) 的程式語言，當瀏覽器載入網頁開始讀取，雖然馬上會讀取 JavaScript 事件相關的程式碼，但是必須等到「事件」被觸發(如使用者點擊、按下鍵盤等)後，才會'再'進行對應程式的執行，也就是事件監聽 addEventListener。
2. 在 addEventListener 的寫法出現前，是在 HTML 的標籤內直接寫入事件。
3. onclick是比較舊的寫法，也沒什麼不對，那現在前端為了避免 XSS 攻擊事件，所以都盡量不在 HTML 標籤上寫上 script 相關標籤，以免被加入程式碼。(XSS攻擊事件今天不討論此事)

<input type="button"  onclick="clickBtn()" class="btn" value="click">

function clickBtn() {
  alert("Hello world!");
}

4. addEventListener的寫法 :

<input type="button" value="click" class="btn">

var button = document.querySelector(".btn");
button.addEventListener(
  "click",
  function () {
    alert("HELLO WORLD!");
  },
  false
);

5. addEventListener有三個參數

   1. 選擇要出現的事件，事件有很多種，不只是 click。

   2. 中間為匿名 function，帶入要出現的功能。

   3. 布林值，決定要不要產生冒泡事件，如果不指定，會自動產生冒泡事件。(預設值為false)(下次再討論。)

6. onclick 與 addEventListener 的差別

   1. onclick 無法綁定兩個事件。
   2. addEventListener 可以綁定多個事件。

<input type="button" value="btn1" class="btn1">
<input type="button" value="btn2" class="btn2">

// onclick 效果
var btn1 = document.querySelector(".btn1");
btn1.onclick = function () {
  alert("a-1");
};

btn1.onclick = function () {
  alert("a-2");
};

//addEventListener效果
var btn2 = document.querySelector(".btn2");
btn2.addEventListener(
  "click",
  function () {
    alert("b-1");
  },
  false
);
btn2.addEventListener(
  "click",
  function () {
    alert("b-2");
  },
  false
);

執行後會發現 onclick 只會執行第二個 alert ，而不是兩個都執行。
而 addEventListener 兩個 alert 都會執行。

今天就到這結束了。