添加事件监听器

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";

        });
    }

- KaranManral

---

如果grid-item中没有任何文字或内容，那么您将在哪里处理点击事件呢？ - Maniraj Murugan

从被点击的 div.grid-item 上或者所有的 div.grid-item 上移除 eventListener？ - James Mwase

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);
}

- Eric Chung

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});
})

- Abdelmonaem Shahat

---

我如何返回我点击的div的第i个值？ - KaranManral

你可以使用 e.target.value 或 e.currentTarget.value。 - Abdelmonaem Shahat