JavaScript Element focus Event

What You’ll Learn

The focus event fires when an element receives focus. Learn addEventListener vs onfocus, why it does not bubble, focusin / capture delegation, relatedTarget, the blur pair, and five try-it labs.

Introduction

Keyboard and assistive-tech users move through a page with focus. When an input, button, link, or other focusable control becomes the active element, the browser fires focus on that element.

Pair it with blur (focus lost) to highlight fields, show hints, start validation, or clean up styles. Remember: focus does not bubble, so a parent listener in the bubble phase will miss child focus changes unless you use capture or focusin.

Understanding focus

An instance event that answers: “Did this element just become the focused element?”

• Fires when the element receives focus (click, Tab, element.focus()).
• Does not bubble — use focusin or capture-phase listening for delegation.
• Not cancelable — preventDefault() does not block focusing.
• FocusEvent — relatedTarget is the element losing focus (if any).
• Handler — onfocus or addEventListener("focus", ...).
• Baseline Widely available on MDN.

📝 Syntax

Use the event name with addEventListener, or set the handler property:

addEventListener("focus", (event) => { });

onfocus = (event) => { };

Event type

A FocusEvent (inherits from UIEvent and Event).

Handy properties

🔁 Event Order (A → B)

When focus moves from element A to element B, MDN documents this order:

1. blur on A
2. focusout on A (bubbles)
3. focus on B
4. focusin on B (bubbles)

So focus is the non-bubbling “this element gained focus” signal; focusin is the bubbling sibling that follows.

⚖️ focus vs focusin

Examples Gallery

Examples follow MDN Element: focus event. Click or Tab into the fields to trigger focus.

const password = document.querySelector('input[type="password"]');

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

password.addEventListener("blur", (event) => {
  event.target.style.background = "";
});

Focused field background becomes pink; blur restores the default.

const name = document.getElementById("name");
const out = document.getElementById("out");

name.onfocus = () => {
  out.textContent = "Name field focused";
};

name.onblur = () => {
  out.textContent = "Name field blurred";
};

Name field focused

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

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

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

Each focused control inside the form gets a pink background; blur clears it.

const a = document.getElementById("a");
const b = document.getElementById("b");
const out = document.getElementById("out");

function onFocus(event) {
  const from = event.relatedTarget
    ? event.relatedTarget.id || event.relatedTarget.tagName
    : "(none)";
  out.textContent =
    "focus on #" + event.target.id + " · relatedTarget=" + from;
}

a.addEventListener("focus", onFocus);
b.addEventListener("focus", onFocus);

focus on #b · relatedTarget=a

const email = document.getElementById("email");
const hint = document.getElementById("hint");

email.addEventListener("focus", () => {
  hint.hidden = false;
});

email.addEventListener("blur", () => {
  hint.hidden = true;
});

Hint visible while email is focused; hidden after blur.

🚀 Common Use Cases

• Highlight the active form field with a CSS class or inline style.
• Show contextual help text while a control is focused.
• Start soft validation or formatting when the user enters a field.
• Track focus changes for analytics or accessibility tooling demos.
• Delegate focus styling across many inputs with capture or focusin.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available.
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• focus does not bubble; focusin does.
• The event is not cancelable.
• Related learning: DOMMouseScroll, focusin, addEventListener(), JavaScript hub.

💡 Best Practices