1 files changed, 116 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/window/blur_event/index.html b/files/zh-cn/web/api/window/blur_event/index.html
new file mode 100644
index 0000000000..44cc5ffd7f
--- /dev/null
+++ b/files/zh-cn/web/api/window/blur_event/index.html
@@ -0,0 +1,116 @@
+---
+title: 'Window: blur event'
+slug: Web/API/Window/blur_event
+translation_of: Web/API/Window/blur_event
+---
+<div>{{APIRef}}</div>
+
+<p>当元素失去焦点时，<strong><code>blur</code></strong>事件将触发。</p>
+
+<p>与 <code>blur</code> 相反的是{{domxref("Window/focus_event", "focus")}}。</p>
+
+<table class="properties">
+ <tbody>
+  <tr>
+   <th scope="row">Bubbles（是否支持冒泡）</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Cancelable（可撤销）</th>
+   <td>No</td>
+  </tr>
+  <tr>
+   <th scope="row">Interface（接口）</th>
+   <td>{{DOMxRef("FocusEvent")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Event handler property（事件处理程序属性）</th>
+   <td>{{domxref("GlobalEventHandlers/onblur", "onblur")}}</td>
+  </tr>
+  <tr>
+   <th scope="row">Sync / Async（同步/异步）</th>
+   <td>Sync</td>
+  </tr>
+  <tr>
+   <th scope="row">Composed</th>
+   <td>Yes</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="示例">示例</h2>
+
+<h3 id="在线示例">在线示例</h3>
+
+<p>此示例当文档失去焦点时，更改其外观。它使用{{domxref("EventTarget.addEventListener()","addEventListener()")}} 去监听{{domxref("Window/focus_event", "focus")}}和 <code>blur</code> 事件。</p>
+
+<h4 id="HTML">HTML</h4>
+
+<pre class="brush: html">&lt;p id="log"&gt;Click on this document to give it focus.&lt;/p&gt;</pre>
+
+<h4 id="CSS">CSS</h4>
+
+<pre class="brush: css">.paused {
+  background: #ddd;
+  color: #555;
+}</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<pre class="brush: js">function pause() {
+  document.body.classList.add('paused');
+  log.textContent = 'FOCUS LOST!';
+}
+
+function play() {
+  document.body.classList.remove('paused');
+  log.textContent = 'This document has focus. Click outside the document to lose focus.';
+}
+
+const log = document.getElementById('log');
+
+window.addEventListener('blur', pause);
+window.addEventListener('focus', play);</pre>
+
+<h4 id="结果">结果</h4>
+
+<p>{{EmbedLiveSample("在线示例")}}</p>
+
+<h2 id="规范">规范</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName("UI Events", "#event-type-blur")}}</td>
+   <td>{{Spec2("UI Events")}}</td>
+   <td>Added info that this event is composed.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName("DOM3 Events", "#event-type-blur")}}</td>
+   <td>{{Spec2("DOM3 Events")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.Window.blur_event")}}</p>
+
+<p>{{DOMxRef(" document. activeelement ")}}的值在处理({{bug(452307)}})时因浏览器而异 ;({{bug(452307)}}):IE10将其设置为焦点将移动到的元素，而Firefox和Chrome通常将其设置为文档的 body。</p>
+
+<h2 id="参见">参见</h2>
+
+<ul>
+ <li>相关联事件: {{domxref("Window/focus_event", "focus")}}</li>
+ <li>Element 目标上的这个事件:{{domxref("Element/blur_event", "blur")}} 事件</li>
+</ul>