JS 筆記 - 事件監聽 addEventListener

在 HTML 標籤寫入 onclick() 事件

在 addEventListener 的寫法出現前，是在 HTML 的標籤內直接寫入事件，假如要寫入一個 click 事件，會這樣寫：

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

就像在 input 標籤上直接加入一個 function，再透過 JS 把這個 function 內容寫出來：

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

點擊 button 的時候，就會出現彈跳視窗。

CodePen: https://codepen.io/hnzxewqw/pen/xxGgmXV

不過這是比較舊的寫法，至今還有人這樣寫，也沒什麼不對，那現在前端為了避免 XSS 攻擊事件，所以都盡量不在 HTML 標籤上寫上 script 相關標籤，以免被埋入程式碼。

關於 XSS 攻擊事件

addEventListener 的寫法

比較新的新增事件的寫法如下：

<input type="button" value="CLICK" class="button">

對比之下，少了 onclick 這個事件在標籤上，但使用選取器 querySelector 的方式，變成下方程式碼寫法：

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

所呈現出來的結果是相同的。

CodePen: https://codepen.io/hnzxewqw/pen/OJVWrQE

監聽事件 addEventListener

這邊使用一個按鈕，在點擊時會產生監聽事件：

<input type="button" value="CLICK" class="button">

要在 button 上新增一個監聽事件時，JS 的起手式是這樣：

var el = document.querySelector(".button");
el.addEventListener("click", function () {}, false);

說明：
在選取的元素中新增事件時，後面的參數是要這樣寫，

1. 選擇要出現的事件，事件有很多種，不只是 click，可能還有 hover 也是，但 click 滿常使用的。

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

3. 布林值，決定要不要產生冒泡事件，如果不指定，會自動產生冒泡事件。

   • false (冒泡事件 Event Bubbling): 從指定的元素往外找 (預設為 false)
   • true (捕獲事件 Event Capturing): 從最外層找到指定元素

onclick 與 addEventListener 的差別

• onclick 無法綁定兩個事件

• addEventListener 可以綁定多個事件

用程式碼來舉例，下面有兩個按鈕，分別為 btnA 跟 btnB，HTML 如下：

<input type="button" value="btnA" class="btnA">
<input type="button" value="btnB" class="btnB">

這邊兩個監聽事件都做兩個 alert 來測試效果，

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

btnA.onclick = function () {
  alert("AA-2");
};

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

透過 CodePen 測試可以看到，onclick 只能讀取到第二個 alert 事件，無法綁定多個，而 addEventListener 可以綁定多個 alert 事件。

CodePen: https://codepen.io/hnzxewqw/pen/wvagLQq