blur (event)

  • Revision slug: Web/Reference/Events/blur
  • Revision title: blur (event)
  • Revision id: 452739
  • Created:
  • Creator: Yoshino
  • Is current revision? Yes
  • Comment

Revision Content

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
DOM L3
Interface
{{ domxref("FocusEvent") }}
Bubbles
No
Cancelable
No
Target
Element
Default Action
None.
Note: The interface was {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})

Properties

{{OpenEventProperties()}}{{FocusEventProperties()}}{{CloseEventProperties()}}

Event delegation

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

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

<script>
  var form = document.getElementById("form");
  form.addEventListener("focus", function( event ) {
    event.target.style.outline = "1px solid pink";    
  }, true);
  form.addEventListener("blur", function( event ) {
    event.target.style.outline = "";    
  }, true);
</script>

{{FocusRelatedEvents()}}

Revision Source

<p>The <code>blur</code> event is fired when an element has lost focus. The main difference between this event and <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> is that only the latter bubbles.</p>
<h2 id="General_info">General info</h2>
<dl>
  <dt style="float: left; text-align: right; width: 120px;">
    Specification</dt>
  <dd style="margin: 0 0 0 120px;">
    <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Interface</dt>
  <dd style="margin: 0 0 0 120px;">
    {{ domxref("FocusEvent") }}</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Bubbles</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Cancelable</dt>
  <dd style="margin: 0 0 0 120px;">
    No</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Target</dt>
  <dd style="margin: 0 0 0 120px;">
    Element</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Default Action</dt>
  <dd style="margin: 0 0 0 120px;">
    None.</dd>
</dl>
<div class="note">Note: The interface was {{ domxref("Event") }} prior to Gecko&nbsp;24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{FocusEventProperties()}}{{CloseEventProperties()}}</p>
<h2 id="Event_delegation">Event delegation</h2>
<p>There are two ways of implementing event delegation for this event : by using the <code>focusout</code> event in browsers that support it (all browsers but Firefox), or by setting the "useCapture" parameter of <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> to <code>true</code>:</p>
<pre class="brush:html;">
&lt;form id="form"&gt;
  &lt;input type="text"&gt;
  &lt;input type="password"&gt;
&lt;/form&gt;

&lt;script&gt;
  var form = document.getElementById("form");
  form.addEventListener("focus", function( event ) {
    event.target.style.outline = "1px solid pink";    
  }, true);
  form.addEventListener("blur", function( event ) {
    event.target.style.outline = "";    
  }, true);
&lt;/script&gt;</pre>
<h2 id="Related_Events">Related Events</h2>
<p>{{FocusRelatedEvents()}}</p>
Revert to this revision