References

Beginner-friendly references for web development, with live, editable examples.

The HTML onblur event

Event All modern browsers Updated
Quick answer

The HTML onblur attribute runs JavaScript when the element loses focus. It is an inline handler for the blur event; in modern code prefer addEventListener('blur', …).

Overview

The onblur event attribute runs JavaScript when the element loses focus. In JavaScript the event itself is named blur — drop the on prefix when you call addEventListener.

It is a focus event. A useful subtlety: focus and blur do not bubble, so they cannot be used with event delegation. When you need bubbling versions — for example to watch focus changes across a whole form — use their counterparts focusin and focusout.

You can wire this up with the inline onblur HTML attribute, but the modern, recommended approach is element.addEventListener('blur', handler) in JavaScript. That keeps behavior out of your markup, lets you attach several handlers to the same event, and makes them easy to remove. The inline attribute is fine for quick demos.

Syntax

<element onblur="handler()">…</element>

element.addEventListener('blur', handler);

Best practices

  • Prefer element.addEventListener('blur', handler) over the inline onblur attribute — it separates behavior from markup and allows multiple handlers.
  • Use the bubbling focusin/focusout events when you need event delegation, since focus and blur do not bubble.
  • Never remove the visible focus indicator without a clear replacement — keyboard users rely on it.
  • Use focus handling to enhance forms (inline validation, hints), not to trap or steal focus.

Frequently asked questions

What is the onblur event?
It runs JavaScript when the element loses focus. In JavaScript the event is named blur.
Why does focus (or blur) not work with event delegation?
Because focus and blur do not bubble. Use the bubbling focusin and focusout events instead.
What is the difference between blur and focusout?
They fire at the same moment, but focusout bubbles and blur does not — so focusout works for delegation.
Should I use the onblur attribute or addEventListener?
Prefer addEventListener('blur', …) in JavaScript. The inline onblur attribute works but mixes behavior into the markup and allows only one handler per element.
onbeforeunload oncancel