Removing an element from a node without removing the associated event?

Question

I have been working on an html/css/javascript 'etch-a-sketch' style project. In a nutshell I have a grid of div elements with a mouseenter event:

const fillInGrid = document.querySelectorAll(".gridSquares");
fillInGrid.forEach((div) => {
    div.addEventListener('mouseenter', (e) => {
        div.style.backgroundColor = 'black';
    });
});

In the project I have a reset button that removes the child elements from the grid and replaces them with new divs, two prompts where a number of rows and columns specified by the user which then generates a new grid:

const resetButton = document.querySelector("#reset");
resetButton.addEventListener('click', (e) => {
        const resetEvent = document.getElementById('container');
        while (resetEvent.lastElementChild) {
            resetEvent.removeChild(resetEvent.lastElementChild);
        };
        newGrid();
    }
);

However, after clicking reset and choosing dimensions for a new grid, the grid is generated but the grid loses responsiveness to the mouseenter event because I'm assuming the event is being removed along with the divs, is there a way to re-add the event or a method alternative that can remove the divs without the associated event?

A link to a codepen demonstrating the issue: https://codepen.io/MaBuCode/pen/eYpjwOV

Answer 1

Instead of adding multiple event listeners on the child elements, you can add a single event listener at the containing element. This way, your code will become more performant and you will also get to catch any event that gets triggered on the dynamically (newly created) elements.

You will need to replace the mouseenter event with the mouseover event, that supports bubbling.

Here's the code to add and replace the mouseenter event:

// // One event listener to rule them all:
document.getElementById("container").addEventListener('mouseover', (e)=>{

  if ( e.target.classList.contains('gridSquares')){
    e.target.style.backgroundColor = 'black';    
  }

});

You can now get rid of the individual div event listener:

fillInGrid.forEach((div) => {
    div.addEventListener('mouseenter', (e) => {
        div.style.backgroundColor = 'black';
    });
});

Codepen Demo

---

Tip: I have also refactored the ’gridCreator' function to reduce the number of appendChild operations, and instead replaced it with a simple string concatenation to make the code more performant:

function gridCreator(gridSize) {
    let content = "";
    for (let i = 0; i < gridSize; i++) {
      content += "<div class='gridSquares'></div>";
    }
    document.getElementById("container").innerHTML = content;
}

By using the approach above, you can also omit the code that removes the .container child elements in the resetButton code.