W3cubDocs

/DOM Events

blur

The blur event is fired when an element has lost focus. The main difference between this event and focusout is that only the latter bubbles.

General info

Specification Document Object Model (DOM) Level 3 Events Specification
Interface FocusEvent
Bubbles No
Cancelable No
Target Element
Default Action None.

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

Properties

Property Type Description
targetRead only EventTarget Event target (DOM element)
typeRead only DOMString The type of event.
bubblesRead only Boolean Whether the event normally bubbles or not.
cancelableRead only Boolean Whether the event is cancellable or not.
relatedTargetRead only EventTarget (DOM element) Event target receiving focus (DOM element).

Event delegation

There are two ways of implementing event delegation for this event : by using the focusout event in browsers that support it, or by setting the "useCapture" parameter of addEventListener to true:

HTML Content

<form id="form">
  <input type="text" placeholder="text input">
  <input type="password" placeholder="password">
</form>

JavaScript Content

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

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 5 (Yes) (Yes)[1] 6 12.1 5.1
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.0 53 (Yes) ? 10.0 12.1 5.1

[1] Prior to Gecko 24 (Firefox 24 / Thunderbird 24 / SeaMonkey 2.21) the interface for this event was Event, not FocusEvent. See (bug 855741).

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/Events/blur