我需要在没有 addEventListener 和没有 HTML 属性的页面上检测所有 HTML 输入元素的焦点事件

Question

我需要检测页面上所有 HTML 输入元素的焦点事件，而不使用addEventListener和HTML attributes

我可以通过点击事件做到这一点：

onclick = () => { 
  // do something
}  

但是当我喜欢onfocus时，它只会在焦点出现在文档本身时触发。

有没有一种方法可以分别对onfocus和onchange on input 和 select 元素进行处理？

编辑

我不能使用HTML attributes的原因是因为它将位于 static 脚本上，该脚本将通过页面中的 CDN 加载。 因此，我无法访问 HTML 代码本身，也无法使用HTML attributes 。

关于addEventListener ，我不想用于性能问题，因为我必须为每个元素循环，并且对于某些浏览器和设备的内存来说代价高昂

此外，如果页面上的元素是动态变化的，就像在 SPA 中一样，我将不得不听取这种变化并再次循环所有这些变化，这会导致性能问题。

Answer 1

使用附加到文档的委托侦听器的简单想法。

 document.addEventListener("click", (e) => { console.log("You clicked on " + e.target.nodeName); }, true); document.addEventListener("focus", (e) => { console.log(e.target.nodeName + " (" + e.target.name + ") has focus"); }, true); document.addEventListener("blur", (e) => { console.log(e.target.nodeName + " (" + e.target.name + ") lost focus"); }, true);

 .red { background-color: red; }

 <div class='red'> <p>some text</p> <input type='text' name='username'> </div>