This translation is incomplete. Please help translate this article from English
简要
为事件标识第二目标
描述
relatedTarget 属性用于在一个事件中查找另外一个元素。有些事件比如 mouseover 通常侧重处理一个特定的目标，而有些有也可能会涉及到第二目标，比如当目标退出第一目标的 mouseover 事件.
事件
只有 MouseEvents 有这个属性，而且这些些只在特定的 MouseEvents 事件中有效：
| 事件名 | relatedTarget role |
| focusin | 哪个 EventTarget 失去焦点 |
| focusout | 哪个 EventTarget 获得焦点 |
| mouseenter | 鼠标从哪个 EventTarget 进来 |
| mouseleave | 鼠标移到哪个EventTarget 去 |
| mouseout | 鼠标移到哪个EventTarget 去 |
| mouseover | 鼠标从哪个EventTarget 进来 |
| dragenter | 鼠标从哪个EventTarget 进来 |
| dragexit | 鼠标移到哪个EventTarget 去 |
示例
<!DOCTYPE html>
<html>
<head>
<style>
div > div {
height: 128px;
width: 128px;
}
#top { background-color: red; }
#bottom { background-color: blue; }
</style>
<script>
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);
}
</script>
</head>
<body onload="loadListener();">
<div id="outer">
<div id="top"></div>
<div id="bottom"></div>
</div>
</body>
</html>