如何简化这段JavaScript代码？大量不同ID形状需精简实现

方案1：遍历ID列表批量处理 #

适合已知固定ID集合的场景，通过数组遍历减少重复代码：

const shapeIds = ['shape1', 'shape2', 'shape3', 'shape4', 'shape5'];

shapeIds.forEach(id => {
  const shape = document.getElementById(id);
  shape.addEventListener('click', function() {
    this.style.color = color;
  });
});

用this指代当前点击的元素，避免重复引用具体变量，代码更简洁。

方案2：类选择器统一处理（推荐） #

给所有形状元素添加同一个类名（比如shape-item），通过类选择器批量获取元素：

<!-- HTML示例：给每个形状元素添加类 -->
<div id="shape1" class="shape-item"></div>
<div id="shape2" class="shape-item"></div>

const shapes = document.querySelectorAll('.shape-item');

shapes.forEach(shape => {
  shape.addEventListener('click', function() {
    this.style.color = color;
  });
});

这种方式扩展性更强，后续新增形状只需添加类名，无需修改JS代码。

方案3：事件委托（高效适配大量/动态元素） #

如果所有形状元素都在同一个父容器内，利用事件冒泡特性，只给父容器绑定一次事件即可：

<!-- HTML结构示例 -->
<div id="shape-container">
  <div id="shape1"></div>
  <div id="shape2"></div>
</div>

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

container.addEventListener('click', function(e) {
  // 通过ID前缀判断目标元素
  if (e.target.id.startsWith('shape')) {
    e.target.style.color = color;
  }
  // 若用了类名，可改为：if (e.target.classList.contains('shape-item'))
});

事件委托只需绑定一次事件，无论元素数量多少或后续动态添加，都能正常响应，性能最优。

内容的提问来源于stack exchange，提问作者Pepszi