focus

  • Revision slug: Web/Reference/Events/focus
  • Revision title: focus
  • Revision id: 402367
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment Moved From DOM/Mozilla_event_reference/focus to Web/Reference/Events/focus

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
FocusEvent
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 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>

Related Events

{{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;">
    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>
<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>Related Events</h2>
<p>{{FocusRelatedEvents()}}</p>
Revert to this revision