problem with forEach and addEventListenner

Issue

hello I have the following code, the problem is that when iterating with forEach it affects all the elements of the nodeList that are 3 how could I do to affect it only generates the call to the eventListener?? I need that when I mouse over one of the projects it affects only this one and not the rest

const $projects = document.querySelectorAll(".projects__grid__element")

$projects.forEach( (project,index) => {
    
    addEventListener('mouseover', (event) => {
        
        // const $projectDescription= project.querySelector(project[index]);
        // $projectDescription.style.display= "flex"
    });
    addEventListener('mouseout', (event) => {
        // const $projectDescription= project.querySelector(".projects__grid__element__description");
        // $projectDescription.style.display = "none"
    });
})

I need that when I mouse over one of the projects it affects only this one and not the rest

Solution

You're using addEventListener, so the event listener is attached with window. But as you want the event listener to be attached on each project instead, so you should use project.addEventListener. like this:

const $projects = document.querySelectorAll(".projects__grid__element")

$projects.forEach( (project,index) => {
    
    project.addEventListener('mouseover', (event) => {
        
        // const $projectDescription= project.querySelector(project[index]);
        // $projectDescription.style.display= "flex"
    });
    project.addEventListener('mouseout', (event) => {
        // const $projectDescription= project.querySelector(".projects__grid__element__description");
        // $projectDescription.style.display = "none"
    });
})

And its better if you attach the event listener to the parent of $projects element, so when you later remove or add new project elements into it the event listener will work, no extra work needed.

Answered By - ezio4df