event.relatedTarget

跳转到：
  1.  
  2. 简要
  3. 描述
  4. 事件
  5. 示例
  6. Specification
  7. See also

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

 

简要

为事件标识第二目标

描述

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

文档标签和贡献者

此页面的贡献者： mdnwebdocs-bot, wbamberg, zhangqiong, ziyunfei, teoli, Darrel.Hsu
最后编辑者: mdnwebdocs-bot,