event.relatedTarget

这篇翻译不完整。请帮忙从英语翻译这篇文章

 

简要

为事件标识第二目标

描述

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>        

在JSFiddle中查看

Specification

See also

文档标签和贡献者

 此页面的贡献者: zhangqiong, ziyunfei, teoli, Darrel.Hsu
 最后编辑者: zhangqiong,