0
148
ViewsJavascript optimisation Event Listener for multiple time the same effect
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>
Is there a way to say something like 'take the one on your left and the one on your right and do the thing' ?
·
Juan Pablo Isaza
1 answers
Answer question0
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');
});
});
·
Juan Pablo Isaza
Report
Answer question