简要
为事件标识第二目标
描述
relatedTarget
属性用于在一个事件中查找另外一个元素。有些事件比如 mouseover
通常侧重处理一个特定的目标,而有些有也可能会涉及到第二目标,比如当目标退出第一目标的 mouseover
事件.
事件
只有 MouseEvent
s 有这个属性,而且这些些只在特定的 MouseEvent
s 事件中有效:
事件名 | 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>