Javascript optimisation Event Listener for multiple time the same effect

May 20, 2022

I want something that when I have a addEventListener(‘mouseover’) it affect the two element next to him.

Like this:

let three = document.getElementById('three');
let six = document.getElementById('six');

intersection3_6.addEventListener("mouseover", function () {
  three.classList.add("hover");
  six.classList.add("hover");
});
intersection3_6.addEventListener("mouseout", function () {
  three.classList.remove("hover");
  six.classList.remove("hover");
});

#table {
  display: grid;
  grid-template-columns: 50px 50px;
  grid-template-rows: 50px 50px;
}

#controls {
  position: absolute;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 44px 12px 44px;
  grid-template-rows: 50px;
  pointer-events: none;
}

#intersection3_6 {
  pointer-events: all;
  background-color: red;
  grid-column-start: 2;
}


.hover {
  background-color: aqua;
}

<div id="table">
  <button id="three"><span>3</span></button>
  <button id="six"><span>6</span></button>
  <div id='controls'>
    <div class='vertical' id='intersection3_6'></div>
  </div>
</div>

It work but obviously when I have something like this with multiple intersections it’s getting boring and not optimised to repeat myself everytime (we can just concentrate on the first row where the purple intersections are)

Is there a way to say something like ‘take the one on your left and the one on your right and do the thing’ ?

>Solution :

Loop over all the elements with the same class, and use DOM navigation operations to reach the elements next to the event target.

document.querySelectorAll(".vertical").forEach(int => {
    int.addEventListener('mouseover', (e) => {
        let table = e.target.parentElement.parentElement;
        table.childElements[0].classList.add('hover');
        table.childElements[1].classList.add('hover');
    });
    int.addEventListener('mouseout', (e) => {
        let table = e.target.parentElement.parentElement;
        table.childElements[0].classList.remove('hover');
        table.childElements[1].classList.remove('hover');
    });
});