JavaScript 全局事件侦听器不适用于焦点事件答案

【问题标题】：JavaScript global event listener not working with focus eventJavaScript 全局事件侦听器不适用于焦点事件
【发布时间】：2023-02-23 03:46:12
【问题描述】：

HTML

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

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

// "click" event WORKS (console logs out '0')
addGlobalEventListener("click", ".number", (e) => {
  console.log(e.target.value)
})

// "focus" event DOESN'T WORK (console doesn't log out anything -- not even an error).
addGlobalEventListener("focus", ".number", (e) => {
  console.log(e.target.value)
})

如果我使用简单的事件侦听器，焦点事件确实有效：

// console logs out '0'
const number = document.querySelector(".number")
number.addEventListener("focus", (e) => {
  console.log(e.target.value)
})

谁能告诉我全局事件侦听器和“焦点”有什么问题？

【问题讨论】：

标签： javascript addeventlistener

【解决方案1】：

您需要在事件捕获阶段添加焦点事件监听器。

document.addEventListener("focus", (e) => {
  console.log(e.target.outerHTML);
}, true);

Focus here: &lt;input type="number" value="0" class="number" /&gt;

【讨论】：