focusin

  • Revision slug: Mozilla_event_reference/focusin
  • Revision title: focusin
  • Revision id: 293329
  • Created:
  • Creator: louisremi
  • Is current revision? No
  • Comment

Revision Content

The focusin event is fired when an element is about to receive focus. The main difference between this event and focus is that the latter doesn't bubble.

General info

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

Properties

{{OpenEventProperties("event target receiving focus.")}}{{FocusEventProperties("event target losing focus (if any).")}}{{CloseEventProperties()}}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatVersionUnknown() }} No {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }} {{ CompatVersionUnknown() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatVersionUnknown() }} No {{ CompatVersionUnknown() }} {{ CompatUnknown() }} {{ CompatVersionUnknown() }}

This event is not yet supported in Firefox, see bug 687787. It is possible to use the focus event instead, which is also compatible with event delegation.

Revision Source

<p>The <code>focusin</code> event is fired when an element is about to receive focus. The main difference between this event and <a href="/en-US/docs/Mozilla_event_reference/focus_(event)"><code>focus</code></a> is that the latter doesn't bubble.</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-focusIn">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;">
    Yes</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("event target receiving focus.")}}{{FocusEventProperties("event target losing focus (if any).")}}{{CloseEventProperties()}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>No</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>No</td>
        <td>{{ CompatVersionUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>This event is not yet supported in Firefox, see bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=687787">687787</a>. It is possible to use the <code>focus</code> event instead, which is also <a href="/en-US/docs/Mozilla_event_reference/focus_(event)#Event_delegation">compatible with event delegation</a>.</p>
Revert to this revision