【初心者向け】JavaScriptのマウスイベント一覧

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mousedown", () => {
  message.innerText = "ハンバーガーっていいよね";
});

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseup", () => {
  message.innerText = "ハンバーガーに興味ない?";
});

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mousemove", () => {
  message.innerText = "ハンバーガーに興味あるんでしょ?";
});

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseenter", () => {
  message.innerText = "ハンバーガーって病みつきになるよね";
});

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseleave", () => {
  message.innerText = "ハンバーガー食べないん?";
});

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseover", () => {
  message.innerText = "ハンバーガーに興味あるんだ?";
});

const mouse_area = document.querySelector("#mouse_area");
const message = document.querySelector("#message");
mouse_area.addEventListener("mouseout", () => {
  message.innerText = "ハンバーガー食べろや(直球)";
});

document.querySelector("#mouse_area").addEventListener("mousemove", (e) => {
  document.querySelector("#offsetX").innerText = e.offsetX;
  (省略)
});