When someone interacts with a webpage, the browser sends events to the relevant JavaScript code. The focusin event happens when focus moves onto an element or its descendant.
When focusin happens
Focus moves onto an element or its descendant.
You can listen for it using addEventListener(). That keeps event handling separate from HTML attributes such as onclick and works well with modern code organization.
A small working example
<div id="demo-target">
<button type="button">First</button>
<button type="button">Second</button>
</div>
<p id="event-status" role="status">Waiting for focusin...</p>
<script>
const eventTarget = document.getElementById("demo-target");
const eventStatus = document.getElementById("event-status");
if (eventTarget) {
eventTarget.addEventListener("focusin", (eventDetails) => {
eventStatus.textContent = "focusin event received";
console.log(eventDetails.type, eventDetails.target);
});
}
</script>Reading the code
The browser listens for focusin on the relevant target. When the event occurs, the callback receives eventDetails, updates the status message and logs the event name and target in Developer Tools.
Tab between children and watch the event bubble to the parent.
This event bubbles, which makes it useful for observing focus within a whole form.
Try it in your browser
Open the page, show the Console panel, and follow this test: Tab between children and watch the event bubble to the parent. Then change one thing in the example and observe whether the event still fires.
Common Beginner Mistakes
- Expecting
focusinto fire without its required user action or browser condition. - Tab between children and watch the event bubble to the parent.
- Adding repeated event listeners without considering cleanup or unwanted side effects.
Key Takeaways
focusinreports focus moves onto an element or its descendant.addEventListener("focusin", ...)listens for the event on the appropriate target.- Tab between children and watch the event bubble to the parent.