initial commit

1 files changed, 123 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/event.relatedtarget/index.html b/files/zh-cn/web/api/event.relatedtarget/index.html
new file mode 100644
index 0000000000..667ea1cf9f
--- /dev/null
+++ b/files/zh-cn/web/api/event.relatedtarget/index.html
@@ -0,0 +1,123 @@
+---
+title: event.relatedTarget
+slug: Web/API/event.relatedTarget
+translation_of: Web/API/MouseEvent/relatedTarget
+---
+<h2 id="Summary" name="Summary"> </h2>
+
+<p>{{APIRef("DOM")}}</p>
+
+<h2 id="Summary" name="Summary">简要</h2>
+
+<p>为事件标识第二目标</p>
+
+<h2 id="Summary" name="Summary">描述</h2>
+
+<p><code>relatedTarget</code> 属性用于在一个事件中查找另外一个元素。有些事件比如 <code>mouseover</code> 通常侧重处理一个特定的目标，而有些有也可能会涉及到第二目标，比如当目标退出第一目标的 <code>mouseover</code> 事件.</p>
+
+<h2 id="事件">事件</h2>
+
+<p>只有 <code>MouseEvent</code>s 有这个属性，而且这些些只在特定的 <code>MouseEvent</code>s 事件中有效：</p>
+
+<table class="standard-table" style="width: auto;">
+ <tbody>
+  <tr>
+   <td class="header">事件名</td>
+   <td class="header"><code>relatedTarget</code> role</td>
+  </tr>
+  <tr>
+   <td>focusin</td>
+   <td>哪个 {{domxref("EventTarget")}} 失去焦点</td>
+  </tr>
+  <tr>
+   <td>focusout</td>
+   <td>哪个 {{domxref("EventTarget")}} 获得焦点</td>
+  </tr>
+  <tr>
+   <td>mouseenter</td>
+   <td>鼠标从哪个 {{domxref("EventTarget")}} 进来</td>
+  </tr>
+  <tr>
+   <td>mouseleave</td>
+   <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td>
+  </tr>
+  <tr>
+   <td>mouseout</td>
+   <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td>
+  </tr>
+  <tr>
+   <td>mouseover</td>
+   <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td>
+  </tr>
+  <tr>
+   <td>dragenter</td>
+   <td>鼠标从哪个{{domxref("EventTarget")}} 进来</td>
+  </tr>
+  <tr>
+   <td>dragexit</td>
+   <td>鼠标移到哪个{{domxref("EventTarget")}} 去</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Example" name="Example">示例</h2>
+
+<pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+&lt;head&gt;
+
+&lt;style&gt;
+div &gt; div {
+  height: 128px;
+  width: 128px;
+}
+#top    { background-color: red; }
+#bottom { background-color: blue; }
+&lt;/style&gt;
+
+&lt;script&gt;
+function outListener(event) {
+  console.log("exited " + event.target.id + " for " + event.relatedTarget.id);
+}
+
+function overListener(event) {
+  console.log("entered " + event.target.id + " from " + event.relatedTarget.id);
+}
+
+function loadListener() {
+  var top = document.getElementById("top"),
+      bottom = document.getElementById("bottom");
+
+  top.addEventListener("mouseover", overListener);
+  top.addEventListener("mouseout", outListener);
+  bottom.addEventListener("mouseover", overListener);
+  bottom.addEventListener("mouseout", outListener);
+}
+&lt;/script&gt;
+
+&lt;/head&gt;
+
+&lt;body onload="loadListener();"&gt;
+
+&lt;div id="outer"&gt;
+  &lt;div id="top"&gt;&lt;/div&gt;
+  &lt;div id="bottom"&gt;&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;/body&gt;
+&lt;/html&gt;
+</pre>
+
+<p><a href="https://jsfiddle.net/uTe99">在JSFiddle中查看</a></p>
+
+<h2 id="Specification" name="Specification">Specification</h2>
+
+<ul>
+ <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-relatedTarget">DOM Level 2 Events: MouseEvent.relatedTarget</a></li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/DOM/event/Comparison_of_Event_Targets" title="DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li>
+</ul>