JavaScript MouseEvent initmouse Event

const event = document.createEvent("MouseEvents");
event.initMouseEvent(
  "click", true, true, window, 0,
  0, 0, 80, 20,
  false, false, false, false,
  0, null
);
document.body.dispatchEvent(event);
console.log(event.type, event.clientX, event.clientY);

const event = document.createEvent("MouseEvents");
event.initMouseEvent(
  "mousedown", true, false, window, 1,
  10, 20, 30, 40,
  true, false, false, false,
  0, null
);
console.log(event.type, event.detail, event.clientX, event.ctrlKey);

const btn = document.getElementById("btn");
btn.addEventListener("click", (e) => {
  console.log(e.type, e.clientX, e.clientY);
});

const event = new MouseEvent("click", {
  bubbles: true,
  cancelable: true,
  clientX: 80,
  clientY: 20
});
btn.dispatchEvent(event);

const legacy = document.createEvent("MouseEvents");
legacy.initMouseEvent(
  "click", true, true, window, 0,
  0, 0, 0, 0,
  false, false, true, false,
  0, null
);
console.log(legacy.shiftKey); // true

const modern = new MouseEvent("click", { shiftKey: true });
console.log(modern.shiftKey); // true

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

to.addEventListener("mouseover", (e) => {
  console.log(e.relatedTarget && e.relatedTarget.id);
});

const event = document.createEvent("MouseEvents");
event.initMouseEvent(
  "mouseover", true, true, window, 0,
  0, 0, 0, 0,
  false, false, false, false,
  0, from
);
to.dispatchEvent(event);