JavaScript Element blur Event

What You’ll Learn

The blur event fires when an element loses focus. Learn addEventListener vs onblur, why blur does not bubble, how focusout and capture help with delegation, FocusEvent.relatedTarget, and five try-it labs.

Introduction

Focus means which control is ready for keyboard input. When the user tabs or clicks away from a field, that field blurs—it loses focus—and the blur event fires on that element.

The opposite event is focus (gains focus). A closely related bubbling event is focusout, which is often better for listening on a parent container.

Understanding blur

An instance event that answers: “Did this element just lose focus?”

• Fires when the element loses focus (click/tab away, hide, or remove in some browsers).
• Does not bubble — use focusout or capture for delegation.
• Not cancelable — you cannot stop focus from leaving via blur.
• FocusEvent — check relatedTarget for the new focus target.
• Baseline Widely available on MDN (since July 2015).

📝 Syntax

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

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

onblur = (event) => { };

Event type

A FocusEvent (inherits from UIEvent and Event).

Useful property

⚖️ blur vs focusout vs focus

🔗 Event Delegation Options

MDN notes two ways to delegate when blur itself does not bubble:

1. Listen for focusout on a parent (it bubbles).
2. Listen for blur with addEventListener(..., true) (capture phase).

Examples Gallery

Examples follow MDN Element: blur event. Click or tab between fields in the Try It Yourself labs to see focus and blur.

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

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

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

Focus password → pink background
Leave field → background cleared

const input = document.querySelector("input");

input.onblur = () => {
  console.log("Field lost focus");
};

// Assigning again replaces the previous onblur handler.

Field lost focus

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

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

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

Any field inside #form gets pink on focus
and clears on blur — one pair of listeners

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

name.addEventListener("blur", (event) => {
  const next = event.relatedTarget;
  console.log(
    "Blurred. Next focus:",
    next ? next.tagName + (next.id ? "#" + next.id : "") : "(none)",
  );
});

Blurred. Next focus: INPUT#email

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

form.addEventListener("focusout", (event) => {
  console.log("focusout from:", event.target.name || event.target.tagName);
  if (event.target.matches("input")) {
    event.target.style.background = "";
  }
});

focusout from: password

🚀 Common Use Cases

• Clear highlight styles when a field is no longer active.
• Validate a control when the user leaves it (often with focusout).
• Save draft values when an editor loses focus.
• Hide floating UI (tooltips, suggestion lists) on blur.
• Log focus movement with relatedTarget for accessibility debugging.

🔧 How It Works

📝 Notes

• MDN: Baseline Widely available (since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Does not bubble; not cancelable.
• Document.activeElement during blur handling can differ across browsers.
• Related learning: beforexrselect, Window blur, Window focus, JavaScript hub.

💡 Best Practices