CODEWITHSUNDEEP
javascriptcssdomcss-selectorsdom-events
KaranManral
KaranManral

Reputation: 694

Adding an Event Listener

How do we add an event listener on each item of the code only once, it's easy to do state management in the react but how do we do this in plain old 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";

        });
    }

Upvotes: 3

Views: 1147

Answers (2)

Abdelmonaem Shahat
Abdelmonaem Shahat

Reputation: 544

You can use the options object in the event listener to make the event happen just once like this: 

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

Upvotes: 2

Eric Chung
Eric Chung

Reputation: 31

You need to use a named function rather than an anonymous one. And then use that named function to remove all listeners, in the same way you added them.

Here's a jsfiddle example: 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);
}

Upvotes: 3

Related Questions