具体来说，relatedTarget 属性在以下事件中通常被使用：
1. mouseover 和 mouseout 事件：
- 在 mouseover 事件中，relatedTarget 表示鼠标移入目标元素之前所在的元素。
- 在 mouseout 事件中，relatedTarget 表示鼠标移出目标元素后所进入的元素。
2. focusin 和 focusout 事件：
- 在 focusin 事件中，relatedTarget 表示失去焦点之前具有焦点的元素。
- 在 focusout 事件中，relatedTarget 表示获得焦点后具有焦点的元素。
以下是一个简单的例子，演示如何使用 relatedTarget 属性：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relatedTarget 属性示例</title>
</head>
<body>
<div id="target" onmouseover="handleMouseOver(event)" onmouseout="handleMouseOut(event)" tabindex="0">
移动鼠标到我上面
</div>
<script>
function handleMouseOver(event) {
var relatedTarget = event.relatedTarget;
console.log('鼠标移入，来自元素：', relatedTarget);
}
function handleMouseOut(event) {
var relatedTarget = event.relatedTarget;
console.log('鼠标移出，进入元素：', relatedTarget);
}
document.getElementById('target').addEventListener('focusin', function(event) {
var relatedTarget = event.relatedTarget;
console.log('获得焦点，失去焦点的元素：', relatedTarget);
});
document.getElementById('target').addEventListener('focusout', function(event) {
var relatedTarget = event.relatedTarget;
console.log('失去焦点，获得焦点的元素：', relatedTarget);
});
</script>
</body>
</html>
在这个例子中，relatedTarget 属性被用于输出与鼠标移入和移出以及焦点获得和失去相关的元素。需要注意的是，relatedTarget 的值可能为 null，表示没有相关的目标元素。这在鼠标移入和移出的时候特别常见，因为移入或移出的方向可能是页面边缘，而没有相关的目标元素。
转载请注明出处：http://www.zyzy.cn/article/detail/4450/HTML