Theblur event fires when an element has lost focus. The event does not bubble, but the relatedfocusout event that follows does bubble.

An element will lose focus if another element is selected.An element will also lose focus if a style that does not allow focus is applied, such ashidden, or if the element is removed from the document — in both of these cases focus moves to thebody element (viewport).Note however thatblur is not fired when a focused element is removed from the document.

The opposite ofblur is thefocus event, which fires when the element hasreceived focus.

Theblur event is not cancelable.

Syntax

Use the event name in methods likeaddEventListener(), or set an event handler property.

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

Event type

AFocusEvent. Inherits fromUIEvent andEvent.

Event properties

This interface also inherits properties from its parentUIEvent, and indirectly fromEvent.

FocusEvent.relatedTarget

The element receiving focus, if any.

Examples

Simple example

HTML

<form>  <label>    Some text:    <input type="text" placeholder="text input" />  </label>  <label>    Password:    <input type="password" placeholder="password" />  </label></form>

JavaScript

const password = document.querySelector('input[type="password"]');password.addEventListener("focus", (event) => {  event.target.style.background = "pink";});password.addEventListener("blur", (event) => {  event.target.style.background = "";});

Result

Event delegation

There are two ways of implementing event delegation for this event: by using thefocusout event, or by setting theuseCapture parameter ofaddEventListener() totrue.

HTML

<form>  <label>    Some text:    <input type="text" placeholder="text input" />  </label>  <label>    Password:    <input type="password" placeholder="password" />  </label></form>

JavaScript

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

Result

Specifications

Browser compatibility

The value ofDocument.activeElement varies across browsers while this event is being handled (Firefox bug 452307): IE10 sets it to the element that the focus will move to, while Firefox and Chrome often set it to thebody of the document.

See also

• TheHTMLElement.blur() method
• Related events:focus,focusin,focusout
• This event onWindow targets:blur event
• Focusing: focus/blur