如何更高效编写实现点击切换盒子背景色的JavaScript代码？

DevOps 小满

2026-8-12

优化点击切换盒子背景色的JavaScript代码

需求说明

点击盒子时将其背景色改为绿色，再次点击恢复初始状态。现有代码可实现功能，但需更高效的JavaScript编写方式。

原有代码

HTML

<div class="container">
  <div class="box first"></div>
  <div class="box second"></div>
  <div class="box third"></div>
</div>

CSS

.colors {
  background: green;
}

原有JavaScript

const first = document.querySelector(".first");
const second = document.querySelector(".second");
const third = document.querySelector(".third");

first.addEventListener("click", () => {
  first.classList.toggle("colors");
});

second.addEventListener("click", () => {
  second.classList.toggle("colors");
});

third.addEventListener("click", () => {
  third.classList.toggle("colors");
});

优化方案

方案1：批量选择元素 + 统一绑定事件

通过querySelectorAll一次性获取所有.box元素，再用forEach遍历绑定点击事件，避免重复编写相同逻辑：

const boxes = document.querySelectorAll('.box');
boxes.forEach(box => {
  box.addEventListener('click', () => {
    box.classList.toggle('colors');
  });
});

方案2：事件委托（更优，支持动态元素）

利用事件冒泡机制，只给父容器绑定一个点击事件，通过事件对象判断触发源是否为目标盒子，这种方式性能更高，且后续动态添加的.box元素无需额外绑定事件即可生效：

const container = document.querySelector('.container');
container.addEventListener('click', (e) => {
  if(e.target.classList.contains('box')){
    e.target.classList.toggle('colors');
  }
});