addEventListener绑定li点击仅首个生效、未全量改样式咨询

1. 仅第一个<li>点击生效的原因 #

document.querySelector(选择器)的规则是只返回DOM里第一个匹配选择器的元素，你代码里写的document.querySelector("li")只会抓取到页面里排在最前面的第一个<li>，后续的addEventListener也只给这一个元素绑定了点击监听，第二个<li>没有绑定任何事件，点击自然没有反应。

2. 点击时无法同步修改所有<li>背景色的原因 #

你的myFunc函数里，修改样式的操作对象是变量giraffe，也就是之前通过querySelector抓到的那第一个<li>，函数逻辑从头到尾都没有选中其他<li>元素，自然不会触发所有元素的样式修改。

首先明确代码里用到的所有额外方法的作用，方便你理解：

• document.querySelectorAll(选择器)：匹配DOM中所有符合选择器规则的元素，返回一个可遍历的节点集合
• forEach(回调函数)：遍历节点集合，对集合内的每一个元素执行回调里的逻辑
• 事件对象e：事件触发时自动传入回调的参数，e.target指向实际触发本次事件的DOM元素

效果1：点击任意<li>，所有<li>同步修改背景色 #

HTML代码无需调整，JavaScript代码修改如下：

// 选中页面中所有li元素，存入变量
const allLi = document.querySelectorAll("li");

// 遍历所有li，给每一个都绑定点击事件
allLi.forEach(function(liItem) {
  liItem.addEventListener("click", changeBg);
})

function changeBg() {
  // 再次遍历所有li，逐个修改背景色
  allLi.forEach(function(liItem) {
    liItem.style.backgroundColor = "#f00";
  })
}

效果2：点击哪个<li>，就只修改哪个<li>的背景色 #

如果不需要全量修改，只需要点哪个改哪个，可以用事件目标实现，代码更简洁：

const allLi = document.querySelectorAll("li");

allLi.forEach(function(liItem) {
  liItem.addEventListener("click", changeBg);
})

// 回调接收事件对象e作为参数
function changeBg(e) {
  // e.target就是实际被点击的那个li，只修改它的样式
  e.target.style.backgroundColor = "#f00";
}

内容的提问来源于stack exchange，提问作者liv.tokyo