Добавить прослушиватель событий в элемент сетки только один раз? - PullRequest
Новая
       31

Добавить прослушиватель событий в элемент сетки только один раз?

1 голос
/ 29 февраля 2020

Я работаю над проектом Javascript в PathFinding Visualiser, где у меня реализован прослушиватель событий для каждого div внутри сетки с использованием для l oop, как только я нажимаю на одну из сеток -етем оно становится красным , но прослушиватель событий все еще активен, я хочу, чтобы это действие выполнялось только один раз

Как мне удалить EventListener, как только я щелкнул один из div в сетке? 

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

        });
    }

Ответы [ 2 ]

3 голосов
/ 29 февраля 2020

Вам нужно использовать именованную функцию, а не анонимную. А затем используйте эту именованную функцию для удаления всех слушателей, так же, как вы их добавили.

Вот пример 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);
}
2 голосов
/ 29 февраля 2020

Вы можете использовать объект параметров в прослушивателе событий, чтобы событие происходило только один раз, например так: 

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