JavaScript Element focus Event

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

Definition

In JavaScript, the focus event fires when an element has received focus (MDN). The opposite is blur, which fires when the element loses focus.

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

Syntax

Listen for focus. Start with this line.

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

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

Library declarations
JavaScript
addEventListener("focus", fn)

Parameters

ParameterDescription
Event nameRequired. "focus"
Handler propOptional. onfocus

Return Value

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

JavaScript Examples

Example 1 — Log When a Field Receives Focus

Listen directly on the control that gains focus.

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

password.addEventListener("focus", (event) => {
  console.log("focused:", event.target.name || event.target.type);
});
Try It Yourself

How It Works

  1. Select the input. Focus fires on that element when it becomes active.
  2. Listen for focus. Click or Tab into the field to trigger it.
  3. Read event.target. The element that received focus.
  4. Keep styles optional. Logging (or a text status) is enough for learning.

Example 2 — Pair focus with blur

MDN idea: react when focus enters and leaves the same field.

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

password.addEventListener("focus", () => {
  out.textContent = "Password field focused";
});

password.addEventListener("blur", () => {
  out.textContent = "Password field blurred";
});
Try It Yourself

How It Works

  1. Attach both listeners. focus enters; blur leaves.
  2. Update a status line. Clearer than CSS for CSS-free labs.
  3. Neither bubbles. Listen on the field itself (or use capture / focusin).
  4. Not cancelable. You cannot block focus with preventDefault on focus (MDN).

Example 3 — Capture Delegation on a Form (MDN)

Because focus does not bubble, use the capture phase on a parent.

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

form.addEventListener(
  "focus",
  (event) => {
    out.textContent = "focused: " + (event.target.name || event.target.tagName);
  },
  true
);
Try It Yourself

How It Works

  1. Listen on the form. One handler covers many controls.
  2. Pass true as the third argument. Capture phase runs before the target (MDN).
  3. Read event.target. The actual focused control inside the form.
  4. Or use focusin. Bubbling alternative for the same delegation pattern.
Compatibility

Browser Support

Element focus is Baseline Widely available (MDN: since July 2015). Safe to use in modern and older evergreen browsers.

✓ Baseline · Widely available

focus

Fires when an element has received focus — FocusEvent, does not bubble.

99% Widely available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
focus Excellent

Bottom line: Listen on the target, or use capture/focusin for parents. Pair with blur. Not cancelable.

Frequently Asked Questions

It fires when an element has received focus — for example when a user tabs to an input or clicks into it (MDN). The opposite event is blur, which fires when focus is lost.
No. MDN marks Element focus as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard.
No. focus does not bubble. The related focusin event that follows does bubble. For event delegation use focusin, or listen for focus in the capture phase (addEventListener(..., true)) (MDN).
A FocusEvent (inherits from UIEvent and Event). relatedTarget is the element that is losing focus, if any.
No. The focus event is not cancelable (MDN). You cannot stop an element from receiving focus by calling preventDefault() on focus.
Use focusin when you want a single listener on a parent (form, dialog, page) to react to focus on descendants, because focusin bubbles.

Next: focusin

Learn the bubbling FocusEvent that follows focus — ideal for form-wide listeners.

focusin 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)

11 people found this page helpful

JavaScript Element DOMMouseScroll Event JavaScript Element focusin Event