添加事件偵聽器

Question

我們如何在代碼的每個項目上只添加一次事件偵聽器，在 React 中進行狀態管理很容易，但是我們如何在普通的舊 javascript 中執行此操作

     <div class="grid-container" id="ad">
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>   
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      <div class="grid-item" ></div>
      </div>

   let divs = document.querySelectorAll(".grid-item")

        for(let i=0;i<divs.length;i++) { 

            divs[i].addEventListener("click", function() {
            divs[i].style["background-color"] = "red";

        });
    }

Answer 1

您需要使用命名函數而不是匿名函數。 然后使用該命名函數刪除所有偵聽器，與添加它們的方式相同。

這是一個 jsfiddle 示例： https ://jsfiddle.net/v1akgpL6/

let divs = document.querySelectorAll(".grid-item");

/* Remove all event listeners */
const removeListeners = () => {
    for (let j = 0; j < divs.length; j++) { 
    divs[j].removeEventListener("click", clickHandler);
  }
}

/* Click event listener */
const clickHandler = (e) => {
  e.currentTarget.style["background-color"] = "red";
  removeListeners();
}

/* Add event listeners */
for (let i = 0; i < divs.length; i++) {
    divs[i].addEventListener("click", clickHandler);
}

Answer 2

您可以使用事件偵聽器中的選項對象使事件只發生一次，如下所示：

let divs = document.querySelectorAll(".grid-item");
const changeBackgroundColor = e => {
 e.target.style.backgroundColor = "red";
 }
divs.forEach(div => {
 div.addEventListener("click", changeBackgroundColor, {once: true});
})