JavaScript全局事件监听器绑定focus事件失效问题排查与解决

问题复现 #

HTML代码 #

<input type="number" value="0" class="number" />

JS代码 #

function addGlobalEventListener(type, selector, callback) {
  document.addEventListener(type, (e) => {
    if (e.target.matches(selector)) callback(e)
  })
}

// "click" 事件正常工作（控制台输出 '0'）
addGlobalEventListener("click", ".number", (e) => {
  console.log(e.target.value)
})

// "focus" 事件无法工作（控制台无任何输出，甚至无报错）
addGlobalEventListener("focus", ".number", (e) => {
  console.log(e.target.value)
})

直接给元素绑定focus事件则可正常执行：

// 控制台输出 '0'
const number = document.querySelector(".number")
number.addEventListener("focus", (e) => {
  console.log(e.target.value)
})

问题原因 #

核心原因是focus事件不支持冒泡：

• 全局事件监听器是把事件绑定在document上，依赖事件冒泡机制让上层元素捕获目标元素触发的事件。
• 但focus事件属于不冒泡的事件类型，目标元素触发focus后，事件不会向上传递到document，所以document上的监听器根本接收不到这个事件，自然无法执行回调。
• 直接给目标元素绑定focus事件时，事件直接在元素本身触发，不需要冒泡，因此能正常工作。

若要在全局监听类似focus的行为，可使用focusin事件——它是focus的冒泡版，支持事件冒泡，能被上层元素捕获。

修复后的全局事件监听器实现 #

修改后的函数支持传入事件选项，同时兼容冒泡类事件（如click）和focusin这类需要冒泡的事件：

function addGlobalEventListener(type, selector, callback, option = false) {
  document.addEventListener(
    type,
    (e) => {
      if (e.target.matches(selector)) callback(e)
    },
    option
  )
}

focusin事件使用示例 #

HTML代码

<input type="number" value="0" class="number" />

JS代码

addGlobalEventListener(
  "focusin",
  ".number",
  (e) => {
    e.target.value = ""
  },
  true
)

click事件使用示例 #

HTML代码

<button class="button" type="button">Button</button>

JS代码

addGlobalEventListener("click", ".button", (e) => {
  e.target.textContent = "Button clicked"
})

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