如何使用事件委托为多个输入元素统一绑定 input 事件并精准识别触发源

✅ 优势：

• 仅需一次 addEventListener，性能更优；
• 自动适配后续动态插入的同类 元素；
• 天然兼容自定义元素（只要它们能触发 input 事件）；
• 逻辑集中，便于统一维护与扩展。

下面是一个可直接运行的完整示例：

ARC Lab

腾讯旗下ARC实验室推出的AI人像修复、抠图和增强工具

下载

// ✅ 绑定到公共父容器（非 document，更精准且避免干扰）
const container = document.querySelector('.input-container');
container.addEventListener('input', handleInput);

function handleInput(e) {
  // ? 确保事件源自 （含自定义元素，如 e.target.matches('input, my-input')）
  if (!e.target.matches('input')) return;

  const input = e.target;
  const helper = input.nextElementSibling;

  // ? 动态测量宽度：用 placeholder 或当前值填充 helper，再读取 offsetWidth
  helper.textContent = input.value || input.getAttribute('placeholder') || '';
  input.style.width = `${helper.offsetWidth}px`;
}

.input-box {
  margin: 0.5rem 0;
}
.input-box input {
  font: inherit;
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.measure-helper {
  position: absolute;
  visibility: hidden;
  height: auto;
  white-space: pre;
  font: inherit;
}

⚠️ 关键注意事项：

• 勿重复使用 id：HTML 中 id 必须唯一，多个 会导致 getElementById 行为不可预测；应改用 class 或 data-* 属性配合 querySelectorAll + forEach（若不用委托）。
• closest() vs matches()：e.target.matches('input') 判断目标是否为 ；若需支持嵌套结构（如 ），可用 e.target.closest('input') 向上查找最近匹配项。
• 样式依赖：.measure-helper 需继承输入框字体、字号等样式（font: inherit），否则测量结果失真。
• 性能优化：避免在事件中频繁操作 DOM；此处 offsetWidth 触发重排，对高频 input 事件影响较小，但若需极致性能，可结合 requestAnimationFrame 节流。

? 延伸提示（面向自定义元素）：
当引入 时，只需在 handleInput 的条件判断中扩展选择器：

if (!e.target.matches('input, my-input')) return;

并确保该自定义元素正确派发 input 事件即可无缝集成。

综上，事件委托不仅是解决“多元素监听”的标准实践，更是构建可扩展、高性能表单交互的基石。从现在起，告别为每个输入框单独绑定监听器，拥抱简洁、健壮、面向未来的事件处理模式。