javascript - How to fix addEventListener in my code? It seems like it's being canceled at any time

Question

I'm trying to make a grid with a determined number of squares inside a container. I have used a function with a default 16x16 squares and added an EventListener (mouseover) to add a class to any div. It works perfectly when I first refresh the page. The problem is that when I want to reset the number of squares with a personalized function, my code do the job, but the EventListener stops working. Any Help Here?

const container = document.getElementById('container');

const buttonsDiv = document.querySelector('#buttons-div');

setGrid();

function resetGrid() {
    clearGrid();

    while (container.firstChild) {
        container.removeChild(container.firstChild);
    };

    let numberOfsquares = prompt('Number of squares??? 1-64:');
    return setGrid(numberOfsquares);
}

function setGrid(numberOfsquares = 16) {
    let heightAndWidth = 960 / numberOfsquares;
    for (let i = 0; i < numberOfsquares; i++) {
        for (let j = 0; j < numberOfsquares; j++) {
            const divNode = document.createElement('div');
            divNode.classList.add('unit');
            divNode.style.width = heightAndWidth + 'px';
            divNode.style.height = heightAndWidth + 'px';
            container.appendChild(divNode);
        }
    }
    return numberOfsquares;
}

function clearGrid() {
    squares.forEach((square) => {
        square.classList.remove('hover');
    });
}

let squares = document.querySelectorAll('.unit');
squares.forEach((square) => {
    square.addEventListener('mouseover', (e) => {
        console.log('listened');
        square.classList.add('hover');
    });
});

const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
clearButton.classList.add('reset-button');
clearButton.setAttribute('id', 'clearButton');
buttonsDiv.appendChild(clearButton);

const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';
resetButton.classList.add('reset-button');
resetButton.setAttribute('id', 'resetButton');
buttonsDiv.appendChild(resetButton);

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
        if (button.id === 'clearButton') {
            clearGrid();
        } else if (button.id === 'resetButton') {
            resetGrid();
        }
    });
});

标签： javascript

Answer 1

如评论中所述。该resetGrid函数从 DOM 中删除元素，因此不再调用附加的事件侦听器，因为元素不再存在。我建议为此使用“事件委托”。因此，将事件侦听器附加到container并使用e.target回调来确定哪个项目被击中。

container.addEventListener('mouseover', e => {
  const { target } = e;
  //use the child index for instance, or add col and row using a data attribute
})