循环生成的div无法通过JavaScript事件修改背景颜色求助

问题出在哪 #

你代码里的变量p是循环内部声明的，循环跑完之后，p只会指向最后一个生成的.pixel元素。所以不管你点哪个div，实际修改的都是最后那个元素的背景色，而不是你点击的那个。控制台能输出说明事件监听是好的，只是改错了对象。

修复后的代码 #

把修改背景色的那行代码里的p换成event.target就行，直接用事件对象拿到你点击的那个元素：

const main = document.getElementById('divmain');
let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let p = document.createElement('div');
  p.classList.add("pixel");
  parent.appendChild(p);
  p.textContent = 'Hello World!';
  p.style.color = 'blue';
}

document.addEventListener('click', function (event) {
  if (!event.target.matches('.pixel')) return;
  console.log("Hello World");
  // 用event.target获取当前点击的元素
  event.target.style.backgroundColor = "yellow";
}, false);

为啥这样改 #

event.target是事件对象自带的属性，它永远指向触发当前事件的那个具体DOM元素——也就是你点击的那个.pixel div。而你之前用的p是循环变量，循环结束后它的引用就固定在最后一次循环创建的元素上了，自然没法对应到你点击的任意一个元素。

内容的提问来源于stack exchange，提问作者Lautaro Ezequiel Coppa