DOM Event - focusin

Devtool Chrome Event Listener


focusin is a focus event where you can register a listener that is enable for all children elements.



Track when the active element has changed

If a focus event occurs in the window or one of its children, we just print the new active element

 * doc is the document
function getElementSelector(active) {
    return active.getAttribute('id') ? `#${}` : `${active.localName}.${active.className.replace(/\s/g, '.')}`;
parent.window.addEventListener('focusin', e => {
     console.log("The active element has changed to "+getElementSelector(;
Just hit the tab key to change the focus and print its selector
  • Result:

Discover More
Devtool Chrome Event Listener
DOM event - focus (onfocus)

This page is the focus event. ie how to register a callback function to handle this event focus means that a HTML element becomes active. blur Focus Event Type Inheritance (bubble) Description...
Devtool Track Active Element
HTML - Focus (Active element) (and Blur)

The focus is the interactive element actually active on a HTML dom document through: a mouse click (if you mouse click on a text input field, ready to begin typing, this element will come into focus)...

Share this page:
Follow us:
Task Runner