Adding an Event Listener

Question

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

        });
    }

There is no text or nothing inside the grid-item, then where exactly you will handle the click?? — Maniraj Murugan
– Maniraj Murugan, Commented Feb 29, 2020 at 8:14
remove eventListener on the clicked div.grid-item or from all div.grid-item? — Jay
– Jay, Commented Feb 29, 2020 at 8:16

Eric Chung · Accepted Answer · 2020-02-29 09:24:41Z

3

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

answered Feb 29, 2020 at 9:24

Eric Chung

314 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Brian Tompsett - 汤莱恩 · Accepted Answer · 2020-02-29 18:42:28Z

2

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

edited Feb 29, 2020 at 18:42

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Feb 29, 2020 at 10:15

Abdelmonaem Shahat

5422 silver badges7 bronze badges

2 Comments

KaranManral Over a year ago

How can I return the divs i'th value where I had clicked?

Abdelmonaem Shahat Over a year ago

you can use e.target.value or e.currentTarget.value

Collectives™ on Stack Overflow

Adding an Event Listener

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related