JavaScript Element focusin Event

Beginner
5 min read
Updated: Nov 2026
3 examples
Event
Decorative image with the word FOCUSIN

Definition

In JavaScript, the focusin event fires when an element has received focus, after the focus event (MDN). The two differ in that focusin bubbles, while focus does not. The opposite is focusout. The event object is a FocusEvent.

Register a listener with addEventListener. Check readiness and browser support before you rely on this event.

Syntax

Listen for focusin. Start with this line.

JavaScript
el.addEventListener("focusin", fn)
CallWhat it does
el.addEventListener("focusin", fn)Primary signature.

Built into the browser. Listen with el.addEventListener("focusin", …) — no import required.

Library declarations
JavaScript
el.addEventListener("focusin", fn)

Parameters

ParameterDescription
FocusEventRequired. Carries target and relatedTarget
Focusable controlRequired. Input, button, link with tabindex, etc.
focusoutOptional. Cleanup when focus leaves

Return Value

Return ValueDescription
*Fires as an Element event (listener receives the Event object).

JavaScript Examples

Example 1 — Form Delegation (MDN)

One focusin / focusout pair on the form styles every child control.

JavaScript
const form = document.getElementById("form");

form.addEventListener("focusin", (event) => {
  event.target.style.background = "pink";
});

form.addEventListener("focusout", (event) => {
  event.target.style.background = "";
});
Try It Yourself

How It Works

  1. Listen on the form. Bubbling delivers child focus events here.
  2. Read event.target. That is the control that just received focus.
  3. Highlight on focusin. Set a temporary style on that control.
  4. Clear on focusout. When focus leaves, reset the style.

Example 2 — focus vs focusin

Show why a parent focus listener misses nested controls.

JavaScript
const form = document.getElementById("form");

form.addEventListener("focus", () => {
  console.log("focus on form (rare for child inputs)");
});

form.addEventListener("focusin", (event) => {
  console.log("focusin →", event.target.tagName);
});
Try It Yourself

How It Works

  1. Attach both on the form. Same parent, different event types.
  2. Focus a child input. focus on the form usually does not run (no bubble).
  3. focusin does run. It bubbles from the input to the form.
  4. Use focusin for delegation. Prefer it when one parent watches many controls.
Compatibility

Browser Support

Element focusin is a standard UI Events focus event. MDN marks it Baseline Widely available since March 2017 — safe for everyday use in modern browsers.

✓ Baseline Widely available

Element focusin

Bubbling FocusEvent after focus — ideal for form-wide focus listeners.

Wide Baseline
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
focusin Widely available

Bottom line: Prefer focusin for parent delegation. Use focus when you only care about that element. Pair with focusout for leave cleanup.

Frequently Asked Questions

It fires when an element has received focus, after the focus event (MDN). Unlike focus, focusin bubbles, so you can listen on a parent and still hear when child controls gain focus.
No. MDN marks Element focusin as Baseline Widely available (since March 2017). It is not Deprecated, Experimental, or Non-standard.
Both fire when an element receives focus. focus does not bubble; focusin does, and it fires after focus. For form-wide listeners, focusin is usually simpler.
A FocusEvent (inherits from UIEvent and Event). relatedTarget is the element that is losing focus, if any.
No. MDN states the focusin event is not cancelable.
focusout — it fires when the element loses focus (after blur) and also bubbles.

Next: focusout

Learn the bubbling event that fires when an element loses focus.

focusout tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

10 people found this page helpful

JavaScript Element focus Event JavaScript Element focusout Event