Using event.target and the object itself give different results

February 17, 2024

I am creating a project where hovering on buttons on a 16×16 grid of buttons turns them red(etch-a-sketch)

Here for changing colors, I tried:


const cells = Array.from(document.querySelectorAll(".cell"));

for(i of cells){
    i.addEventListener("mouseover",function(event){
        i.style.background = "red";
    });
}

But it didn’t work as intended and only changed the color of the last button in the array when hovering on any of the buttons. But the following worked:

const cells = Array.from(document.querySelectorAll(".cell"));

for(i of cells){
    i.addEventListener("mouseover",function(event){
        event.target.style.background = "red";
    });
}

What exactly is the difference between these two? Because I assumed event.target would refer to i so both pieces of code would do the same thing.

>Solution :

In your first example i is updated in every iteration of the loop. Therefore when the event fires i will hold the last value it was set to, ie. the last element in the cells array. When you read the event.target you are explicitly accessing the element that raised the event in the DOM. It’s for this reason that the latter approach is by far the better method.

Also note that your code can be made more succinct. You can use forEach() directly on the Collection returned by querySelectorAll() without needing to maintain any indexer variable:

const cells = document.querySelectorAll(".cell");

cells.forEach(cell => cell.addEventListener("mouseover", e => e.target.style.background = "red"));

.container {
  width: 250px;
}

.container .cell {
  display: inline-block;
  width: 25px;
  height: 25px;
  background-color: #CCC;
  margin: 0;
  padding: 0;
  white-space: collapse;
}

<div class="container">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>

  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</div>