---
title: FocusEvent
slug: Web/API/FocusEvent
tags:
  - API
  - DOM
  - DOM 事件
  - 事件
  - 参考
translation_of: Web/API/FocusEvent
---
<div>{{APIRef("DOM Events")}}</div>

<p><strong><code>FocusEvent</code></strong> 接口表示和焦点相关的事件比如 {{event("focus")}}, {{event("blur")}}, {{event("focusin")}}, 和 {{event("focusout")}}。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="构造器">构造器</h2>

<dl>
 <dt>{{domxref("FocusEvent.FocusEvent", "FocusEvent()")}}</dt>
 <dd>使用给定的参数创建 <code>FocusEvent</code> 事件。</dd>
</dl>

<h2 id="属性">属性</h2>

<p><em>此接口从它的父级继承了属性 {{domxref("UIEvent")}}, 间接来自于 {{domxref("Event")}}</em>.</p>

<dl>
 <dt>{{domxref("FocusEvent.relatedTarget")}} {{readonlyInline}}</dt>
 <dd>{{domxref("EventTarget")}} 这个代表此次事件的次要目标. 在一些案例中，例如切换浏览器tab标签时， 为了安全的原因，这个属性可能会被设置为 <code>null</code> 。</dd>
</dl>

<h2 id="方法">方法</h2>

<p><em>此接口没有特殊的方法。它从父级 {{domxref("UIEvent")}} 继承方法<em>, 并间接从 {{domxref("Event")}} 继承方法。</em></em></p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
  <tr>
   <td>{{SpecName('UI Events', '#interface-focusevent', 'FocusEvent')}}</td>
   <td>{{Spec2('UI Events')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('DOM3 Events', '#interface-focusevent', 'FocusEvent')}}</td>
   <td>{{Spec2('DOM3 Events')}}</td>
   <td>初始定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>



<p>{{Compat("api.FocusEvent")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li>{{domxref("Event")}} 基接口</li>
</ul>