blur (event)

  • Revision slug: Mozilla_event_reference/blur_(event)
  • Revision title: blur (event)
  • Revision id: 292642
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment

Revision Content

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

General info

Specification
DOM L3
Interface
FocusEvent
Synchronicity
synchronous
Bubbles
No
Cancelable
No
Target
Element
Default Action
None.

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>

Revision Source

<p>The <code>blur</code> event is fired when an element is about to lose 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;">
    FocusEvent</dd>
  <dt style="float: left; text-align: right; width: 120px;">
    Synchronicity</dt>
  <dd style="margin: 0 0 0 120px;">
    synchronous</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>
<h2 id="Properties">Properties</h2>
<p>{{OpenEventProperties()}}{{FocusEventProperties()}}{{CloseEventProperties()}}</p>
<h2>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>
Revert to this revision