JavaScript MouseEvent relatedTarget Property

What You’ll Learn

MouseEvent.relatedTarget is the secondary EventTarget for enter/leave style mouse events—the other element the pointer came from or went to. Learn MDN’s target vs relatedTarget table, when the value is null, and five try-it labs.

Introduction

When the pointer slides from a red box into a blue box, event.target tells you one side of the story. relatedTarget tells you the other side—where you came from on mouseover, or where you went on mouseout.

el.addEventListener("mouseover", (event) => {
  console.log(event.target);         // element entered
  console.log(event.relatedTarget);  // element exited (or null)
});

Understanding the Property

MDN: MouseEvent.relatedTarget is the secondary target for the mouse event, if there is one. For events with no secondary target, it returns null. FocusEvent.relatedTarget is a similar property for focus events.

• Instance — read event.relatedTarget in a handler.
• EventTarget or null — often an Element; sometimes missing.
• Secondary — complements event.target on transition events.
• Read-only — may be set via constructor options on synthetic events.

📝 Syntax

const other = mouseEvent.relatedTarget;

Value

An EventTarget object or null (MDN).

📚 target vs relatedTarget

MDN’s mapping for the common transition events:

Examples Gallery

Examples follow MDN MouseEvent.relatedTarget. Move between colored boxes in the try-it labs to see both targets.

const log = document.getElementById("log");
const red = document.getElementById("red");
const blue = document.getElementById("blue");

function outListener(event) {
  const related = event.relatedTarget ? event.relatedTarget.id : "unknown";
  log.innerText = `\nfrom ${event.target.id} into ${related} ${log.innerText}`;
}

function overListener(event) {
  const related = event.relatedTarget ? event.relatedTarget.id : "unknown";
  log.innerText = `\ninto ${event.target.id} from ${related} ${log.innerText}`;
}

red.addEventListener("mouseover", overListener);
red.addEventListener("mouseout", outListener);
blue.addEventListener("mouseover", overListener);
blue.addEventListener("mouseout", outListener);

into blue from red
from red into blue

panel.addEventListener("mouseenter", (e) => {
  console.log("enter", e.target.id, "from", e.relatedTarget && e.relatedTarget.id);
});

panel.addEventListener("mouseleave", (e) => {
  console.log("leave", e.target.id, "to", e.relatedTarget && e.relatedTarget.id);
});

enter panel from body
leave panel to body

button.addEventListener("click", (e) => {
  console.log(e.relatedTarget); // typically null
  console.log(e.target);        // the button
});

null
[object HTMLButtonElement]

function relatedId(event) {
  return event.relatedTarget ? event.relatedTarget.id || "(no id)" : "unknown";
}

el.addEventListener("mouseout", (e) => {
  console.log(`left ${e.target.id} toward ${relatedId(e)}`);
});

left card toward sidebar

const from = document.getElementById("a");
const to = document.getElementById("b");

const event = new MouseEvent("mouseover", {
  bubbles: true,
  relatedTarget: from
});

to.dispatchEvent(event);
console.log(event.relatedTarget === from); // true when supported
console.log(event.target === to);          // true after dispatch to `to`

true
true

🚀 Common Use Cases

• Logging which element the pointer came from or went to.
• Hover menus that ignore moves into a related dropdown panel.
• Highlighting “from → to” paths while teaching mouse events.
• Drag-and-drop enter/leave debugging with dragenter / dragleave.
• Unit tests that construct over/out events with a known secondary target.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Returns null when there is no secondary target.
• Also used on dragenter / dragleave (MDN table).
• Related: pageY, addEventListener(), MouseEvent(), Window, JavaScript hub.

💡 Best Practices