FocusEvent

  • Revision slug: Web/API/FocusEvent
  • Revision title: FocusEvent
  • Revision id: 471161
  • Created:
  • Creator: kscarfone
  • Is current revision? Yes
  • Comment Updated tags

Revision Content

{{eventref("Event", "UIEvent")}}{{SeeCompatTable}}

The FocusEvent interface represents focus-related events like {{event("focus")}}, {{event("blur")}}, {{event("focusin")}}, or {{event("focusout")}}.

Properties

Inherits properties from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}.

{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}
Is an {{domxref("EventTarget")}} representing a secondary target for this event. As in some cases (like when tabbing in or out a page), this property may be set to null for security reasons.

Constructor

{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}
Creates a FocusEvent event with the given parameters.

Methods

No specific method; inherits methods from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}.

Specifications

Specification Status Comment
{{SpecName('UI Events', '#constructor-focusevent', 'FocusEvent')}} {{Spec2('UI Events')}} Added a constructor.
{{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}} {{Spec2('DOM3 Events')}} Initial definition.

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatVersionUnknown}} {{CompatGeckoDesktop("24.0")}} 9.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Constructor {{CompatVersionUnknown}} {{CompatGeckoDesktop("24.0")}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{CompatVersionUnknown}} {{CompatGeckoMobile("24.0")}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}
Constructor {{CompatVersionUnknown}} {{CompatGeckoMobile("24.0")}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatVersionUnknown}}

See also

  • The {{domxref("Event")}} base interface.

Revision Source

<p>{{eventref("Event", "UIEvent")}}{{SeeCompatTable}}</p>
<p>The <strong><code>FocusEvent</code></strong> interface represents focus-related events like {{event("focus")}}, {{event("blur")}}, {{event("focusin")}}, or {{event("focusout")}}.</p>
<h2 id="Properties">Properties</h2>
<p><em>Inherits properties from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}</em>.</p>
<dl>
  <dt>
    {{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}</dt>
  <dd>
    Is an {{domxref("EventTarget")}} representing a secondary target for this event. As in some cases (like when tabbing in or out a page), this property may be set to <code>null</code> for security reasons.</dd>
</dl>
<h2 id="Constructor">Constructor</h2>
<dl>
  <dt>
    {{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}</dt>
  <dd>
    Creates a <code>FocusEvent</code> event with the given parameters.</dd>
</dl>
<h2 id="Methods">Methods</h2>
<p><em>No specific method; inherits methods <em>from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}.</em></em></p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <tbody>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
    <tr>
      <td>{{SpecName('UI Events', '#constructor-focusevent', 'FocusEvent')}}</td>
      <td>{{Spec2('UI Events')}}</td>
      <td>Added a constructor.</td>
    </tr>
    <tr>
      <td>{{SpecName('DOM3 Events', '#interface-FocusEvent', 'FocusEvent')}}</td>
      <td>{{Spec2('DOM3 Events')}}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<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>{{CompatGeckoDesktop("24.0")}}</td>
        <td>9.0</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Constructor</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoDesktop("24.0")}}</td>
        <td>{{CompatNo}}</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>{{CompatGeckoMobile("24.0")}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
      <tr>
        <td>Constructor</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatGeckoMobile("24.0")}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>The {{domxref("Event")}} base interface.</li>
</ul>
Revert to this revision