I need to detect focus event on all HTML input elements on page without addEventListener and without HTML attribute

Question

I need to detect focus event on all HTML input elements on the page without using addEventListener and without HTML attributes

I was able to do that with the click event by:

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

But when i do like that for onfocus it just fires when the focus occurs in the document itself.

Is there a way I could to it the same way for onfocus and onchange on input and select elements, respectively?

EDIT

The reason why i can't use the HTML attributes it's because it will be on a static script that will load through a CDN in the page. Thus, i do not have access to the HTML code itself and i can't use the HTML attributes .

About the addEventListener , I don't want use for performance issues, because i would have to loop for every elements and it would be costly for some browsers and devices memories

Furthermore, if the element on pages change dynamically, like in a SPA, i would have to listen to this change and loop through all of them again, which would cause performance issues .

Answer 1

A simple idea using delegated listeners attached to the document.

 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>