如何无需addEventListener和HTML属性检测页面输入元素的焦点与变更事件？

你可以利用冒泡型全局事件属性实现需求，无需遍历元素或修改HTML，同时完美适配动态页面（SPA）场景：

1. 检测所有input的focus事件 #

用onfocusin替代onfocus——onfocus不冒泡，仅会在文档自身获得焦点时触发；而onfocusin支持事件冒泡，能全局捕获所有子元素的focus事件：

onfocusin = (e) => {
  if (e.target.tagName.toLowerCase() === 'input') {
    // 执行input focus的处理逻辑
    console.log('Input 获得焦点:', e.target);
  }
};

2. 检测所有select的change事件 #

change事件本身具备冒泡特性，直接全局赋值onchange即可捕获所有select的change事件：

onchange = (e) => {
  if (e.target.tagName.toLowerCase() === 'select') {
    // 执行select change的处理逻辑
    console.log('Select 选项变更:', e.target.value);
  }
};

核心优势 #

• 无需遍历任何DOM元素，仅通过两个全局事件处理就能覆盖所有现有及动态添加的input/select
• 完全符合你的限制：不使用HTML属性，也不需要重复绑定事件（SPA中新元素的事件会自动冒泡到全局）
• 性能开销极低，本质和你之前用的onclick全局绑定逻辑一致

可选扩展 #

如果需要筛选特定类型的input（比如仅文本输入框），可以在判断条件中补充：

if (e.target.tagName.toLowerCase() === 'input' && e.target.type === 'text') {
  // 仅处理文本输入框的focus事件
}

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