FocusEvent.relatedTarget
relatedTarget 属性返回与触发 focus/blur 事件的元素相关的元素。
当一个元素失去焦点时，relatedTarget 属性将设置为接收焦点的元素；当一个元素获得焦点时，relatedTarget 属性将设置为失去焦点的元素。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FocusEvent relatedTarget</title>
</head>
<body>
<input id="input1" type="text" />
<input id="input2" type="text" />
<script>
const input1 = document.querySelector('#input1');
const input2 = document.querySelector('#input2');
input1.addEventListener('focus', (event) => {
const relatedTarget = event.relatedTarget;
if (relatedTarget === input2) {
console.log('焦点从 input2 移动到 input1');
}
});
input1.addEventListener('blur', (event) => {
const relatedTarget = event.relatedTarget;
if (relatedTarget === input2) {
console.log('焦点将移动到 input2');
} else {
console.log('焦点将移动到其他元素');
}
});
</script>
</body>
</html>
Element.closest()
获取匹配特定选择器且离当前元素最近的祖先元素（也可以是当前元素本身）。如果匹配不到，则返回 null。
参数： selectors 是指定的选择器，比如 "p:hover, .toto + q"。
返回值：是查询到的祖先元素，也可能是 null。
var closestElement = targetElement.closest(selectors);
