页面更新后 eventListener 没有运行

Question

I have written this code to get the squares of a grid to change their background color to black upon a mouseover event.我编写了这段代码来让网格的正方形在鼠标悬停事件时将它们的背景颜色更改为黑色。 It works when the page initially loads, but if I create a new grid the mouseover event no longer works.它在页面最初加载时起作用，但如果我创建一个新网格，则鼠标悬停事件不再起作用。

I updated the original post with a snippet.我用一个片段更新了原始帖子。 Sorry I didn't do that from the beginning.对不起，我从一开始就没有这样做。

 let number = 16; makeGrid(number); function makeGrid(number) { for (let i=0; i < number; i++) { for (let j=0; j < number; j++) { const rows = document.createElement('div'); const container = document.getElementById('container') rows.setAttribute('class', 'rows'); container.appendChild(rows); } } container.style.gridTemplateColumns = `repeat(${number}, 1fr)`; container.style.gridTemplateRows = `repeat(${number}, 1fr)`; } //create new grid with on button let newGrid = document.getElementById('newGrid'); newGrid.addEventListener('click', () => { let number = prompt('Enter a number'); let container = document.getElementById('container'); container.textContent = ''; makeGrid(number); }) //change background color to black let changeClass = document.querySelectorAll('.rows'); changeClass.forEach((item) => { item.addEventListener('mouseover', e => { item.style.backgroundColor = 'black'; }) })

 body { background-color: rgb(5, 51, 5); } #container { margin: auto; width: 500px; height: 500px; display: grid; border-style: solid; border-width: thin; border-color: lightslategray; background-color: white; }.rows{ }.black { background-color: black; } #header { text-align: center; } #button { text-align: center; } #footer { text-align: center; } #newGrid { background-color: lightgray; color: darkcyan; font-size: 20px; padding: 12px 28px; border-radius: 0px; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Etch-a-Sketch</title> <link rel="stylesheet" href="style:css"> </head> <body> <h1 id='header'>Etch-a-Sketch</h1> <br> <div id='button'> <button id='newGrid' class='button'>New Grid</button> </div> <br> <br> <div id='container'></div> <br> <footer id='footer'>Made by. Joe Maniaci</footer> <script src="main.js"></script> </body> </html>

Answer 1

When you query the DOM with document.querySelectorAll('.rows') and add the event listeners, there is only one "grid" in the DOM at that time.当您使用document.querySelectorAll('.rows')查询 DOM 并添加事件侦听器时，此时 DOM 中只有一个“网格”。 When a "grid" is subsequently added to the DOM, as triggered by the user's click event, you must instantiate event listeners on the newly added DOM nodes too.当随后将“网格”添加到 DOM 时，由用户的单击事件触发，您也必须在新添加的 DOM 节点上实例化事件侦听器。

A way to avoid this problem and a better approach overall in your situation is to use delegated event listeners.在您的情况下，避免此问题的一种方法和更好的方法是使用委托事件侦听器。 For example:例如：

document.addEventListener('mouseover', e=>{
  if(e.target.matches(‘.myClickableItemClass’){
    e.target.style.backgroundColor = 'black';
  }
}

Learn more about event delegation here: https://medium.com/@bretdoucette/part-4-what-is-event-delegation-in-javascript-f5c8c0de2983在此处了解有关事件委托的更多信息： https://medium.com/@bretdoucette/part-4-what-is-event-delegation-in-javascript-f5c8c0de2983

页面更新后 eventListener 没有运行

问题描述

1 个解决方案

解决方案1
0 2020-05-13 20:02:14

页面更新后 eventListener 没有运行

问题描述

1 个解决方案

解决方案1 0 2020-05-13 20:02:14

解决方案1
0 2020-05-13 20:02:14