如何为多个同ID/类名元素绑定EventListener？仅首个元素生效

问题描述 #

开发项目时遇到问题：有十个左右用了相同ID的菜单项，想点击任意一项时修改它的样式，但写的JS代码只有第一个元素点击有反应，其余都没效果。

你的代码 #

const menuElement = document.querySelector('#menuElement')
const darktheme = document.querySelector('.dark')

loadEventListener()

function loadEventListener() {
    menuElement.addEventListener('click', draw)
}

function draw() {
    menuElement.style.background = 'var(--primary-color)'
}

问题根源 #

1. ID唯一性违规：HTML规范明确要求ID是页面内唯一标识，浏览器只会返回第一个匹配该ID的元素，所以querySelector('#menuElement')只能拿到第一个菜单项，事件也只绑定在了这一个元素上。
2. 事件目标错误：就算其他元素能触发点击，draw函数里始终修改的是一开始获取的那个menuElement（也就是第一个元素）的样式，不是你实际点击的项。

修复方案 #

第一步：修正HTML结构

把所有菜单项的id="menuElement"改成class="menu-item"——类名是专门用来复用标识多元素的，这才是正确的写法。

第二步：修改JS代码

有两种实用的实现方式，根据你的场景选择：

方式1：给每个元素单独绑定事件（适合静态元素）

// 获取所有带menu-item类的元素
const menuElements = document.querySelectorAll('.menu-item')
const darktheme = document.querySelector('.dark')

loadEventListener()

function loadEventListener() {
    // 遍历每个元素，逐个绑定点击事件
    menuElements.forEach(item => {
        item.addEventListener('click', draw)
    })
}

function draw(e) {
    // 用事件对象的target属性拿到当前点击的元素
    e.target.style.background = 'var(--primary-color)'
}

方式2：事件委托（更高效，支持动态添加元素）

如果菜单项是后续通过JS动态生成的，推荐用事件委托——只给父容器绑定一次事件，就能处理所有子元素的点击：

// 替换成你页面里菜单项的实际父容器选择器，比如#menu-container
const menuContainer = document.querySelector('#menu-container')
const darktheme = document.querySelector('.dark')

loadEventListener()

function loadEventListener() {
    menuContainer.addEventListener('click', draw)
}

function draw(e) {
    // 判断点击的目标是不是菜单项
    if (e.target.classList.contains('menu-item')) {
        e.target.style.background = 'var(--primary-color)'
    }
}

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