在 jQuery 中，event.relatedTarget 属性用于指示与事件相关的另一个 DOM 元素。这个属性通常在鼠标事件中使用，比如 mouseover 和 mouseout 事件。当鼠标从一个元素移动到另一个元素时，relatedTarget 属性可以告诉你鼠标移动的目标元素是哪一个。
如何使用 event.relatedTarget 属性
要访问 event.relatedTarget 属性，首先需要在事件处理程序中使用 event 参数。例如，在 mouseover 事件处理程序中，你可以这样访问 relatedTarget 属性：
------------------------------- --------------- -
--- -------------- - --------------------
-- ---------------- -
------------------ ----- ---- - - ----------------------- - - -- -------------
-
---在上面的示例中，当鼠标从相关元素移动到 #myElement 元素时，会打印一条消息。如果 relatedTarget 为 null，则表示鼠标移动到了文档之外。
一个实际的示例
假设我们有一个列表，当鼠标移动到列表项上时，我们想要改变列表项的背景颜色。我们可以使用 event.relatedTarget 属性来判断鼠标是从哪个元素移动过来的。
HTML 代码如下：
--- ------------ -------- ------ -------- ------ -------- ------ -----
JavaScript 代码如下：
---------- -------------------- --------------- -
--- -------------- - --------------------
-- --------------- -- ----------------------- --- ----- -
------------------------------- -------------
-
---
---------- ------------------- --------------- -
------------------------------- ---------
---在上面的示例中，当鼠标移动到列表项上时，如果鼠标是从另一个列表项移动过来的，那么当前列表项的背景颜色会变成浅蓝色，当鼠标移出时，背景颜色会恢复为白色。
总结
通过使用 event.relatedTarget 属性，我们可以更灵活地处理鼠标事件，根据鼠标移动的目标元素来执行不同的操作。这个属性在处理复杂的交互逻辑时非常有用，希望本文对你有所帮助。