原生JavaScript如何绑定多ID元素事件？解决绑定不生效问题

你代码里的问题很明确：document.querySelector()只会返回匹配选择器的第一个元素，所以只有#id_1会绑定focus事件，另外两个元素根本没被选中，自然事件不会触发。而jQuery的$()会返回所有匹配的元素集合，所以能批量绑定事件。

下面给你两种可行的原生JS实现方案：

方案一：遍历所有匹配元素绑定事件 #

这是最直接的方式，用querySelectorAll()获取所有目标元素，然后逐个绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  // 获取所有匹配的元素
  const targetElements = document.querySelectorAll('#id_1, #id_2, #id_3');
  
  // 遍历每个元素，绑定focus事件
  targetElements.forEach(element => {
    element.addEventListener('focus', () => {
      // 注意：如果#output是表单元素（如input）用value，普通元素用textContent
      const output = document.querySelector('#output');
      output.textContent = ''; // 或者 output.value = ''; 根据元素类型选择
    });
  });
});

querySelectorAll()会返回一个包含所有匹配元素的NodeList，现代浏览器都支持用forEach()直接遍历它，给每个元素单独绑定事件逻辑。

方案二：事件委托（更高效，适合动态元素） #

如果你的元素可能是动态添加的，或者元素数量较多，事件委托是更好的选择——把事件绑定到父元素上，通过事件冒泡来处理子元素的事件：

document.addEventListener('DOMContentLoaded', () => {
  // 选择一个合适的父容器（这里用body，你可以换成更具体的父元素）
  document.body.addEventListener('focusin', (e) => {
    // 检查触发事件的元素是否是我们的目标ID之一
    const targetIds = ['id_1', 'id_2', 'id_3'];
    if (targetIds.includes(e.target.id)) {
      const output = document.querySelector('#output');
      output.textContent = '';
    }
  });
});

这里用了focusin事件而不是focus，因为focus事件默认不冒泡，而focusin是冒泡的，这样我们不需要额外设置捕获模式。如果一定要用focus，可以在addEventListener的第三个参数传true（开启捕获阶段监听）：

document.body.addEventListener('focus', (e) => {
  const targetIds = ['id_1', 'id_2', 'id_3'];
  if (targetIds.includes(e.target.id)) {
    const output = document.querySelector('#output');
    output.textContent = '';
  }
}, true);

额外提醒 #

• 区分textContent和value：如果#output是div、p这类普通元素，用textContent更安全（避免XSS风险）；如果是input、textarea这类表单元素，才用value。
• 原生JS没有像jQuery那样的批量事件绑定方法，所以需要手动处理元素集合的遍历，或者用事件委托来简化逻辑。

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