focus

  • Revision slug: Web/Reference/Events/focus
  • Revision title: focus
  • Revision id: 452737
  • Created:
  • Creator: Yoshino
  • Is current revision? Yes
  • Comment Bug 855741

Revision Content

The focus event is fired when an element has received focus. The main difference between this event and focusin 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 focusin 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>focus</code> event is fired when an element has received focus. The main difference between this event and <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</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-focus">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>focusin</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