javascript - 检测对输入(onfocus)事件的关注是元素在 dom 中不存在，但使用 Vanilla (普通)javascript

Question

我有以下内容:

 document.querySelectorAll("input[type='text']").forEach((element) => {
        element.addEventListener('onfocusin', () => {
            alert("was focused!!!");
        });
    });

这些的问题是只有当元素存在时才有效。如果在调用此代码后将某个元素添加到 dom，则不会添加任何事件监听器。

即使元素尚不存在，我如何检测到 onfocusin 事件？

Answer 1

将事件监听器放在包含所有( future )输入(例如，文档本身)的父元素上。该事件将从输入中“冒出”。在处理程序中，您需要检查目标是否确实是您想要的元素:

 document.addEventListener('focusin', (e) => {
   const target = e.target;
   if (target.tagName == "INPUT" && target.type == "text") {
        alert("was focused!!!");
   }
 });