JS 筆記 - 事件監聽優化

這次來練習一個透過選取父元素來監聽子元素的內容，這邊有一個選單，裡面有兩個選項。

<ul class="list">
  <li>炸雞上校</li>
  <li>漢堡王子</li>
</ul>

之前有學習到，如果要透過監聽事件，管理 li 選項，則會這樣寫:

var list = document.querySelectorAll(".list li");

但這樣有一個麻煩的地方，querySelectorAll只會選擇到第一個元素，也就是這邊有兩個 li，它只會選到第一個，後面的都要另外宣告變數來管理，如果 li 有 100 個，那就要宣告 100 個變數，但這樣會導致效能降低。

透過父元素的管理，不只讓效能提高，也可以精簡寫法，
選取父元素如下方寫法:

var list = document.querySelector(".list"); //選取 list

list.addEventListener("click", checkName, false); //建立監聽

function checkName(e) {
  if (e.target.nodeName !== "LI") {
    return;
  }
  console.log(e.target.textContent);
}

函式內容說明:

• 設定判斷式，若事件中的目標的節點名稱不是 LI ，就回傳內容。

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