JavaScript MouseEvent relatedTarget Property

function label(node) {
  return node ? (node.id || node.tagName) : "null";
}

function onOver(e) {
  console.log("into", label(e.target), "from", label(e.relatedTarget));
}

function onOut(e) {
  console.log("from", label(e.target), "into", label(e.relatedTarget));
}

red.addEventListener("mouseover", onOver);
red.addEventListener("mouseout", onOut);
blue.addEventListener("mouseover", onOver);
blue.addEventListener("mouseout", onOut);

box.addEventListener("mouseenter", (e) => {
  console.log({
    type: e.type,
    target: e.target.id,
    related: e.relatedTarget && e.relatedTarget.id
  });
});

box.addEventListener("mouseleave", (e) => {
  console.log({
    type: e.type,
    target: e.target.id,
    related: e.relatedTarget && e.relatedTarget.id
  });
});

function label(node) {
  if (!node) return "null";
  return node.id || node.nodeName;
}

document.addEventListener("click", (e) => {
  console.log({
    target: label(e.target),
    relatedTarget: label(e.relatedTarget) // usually "null" on click
  });
});