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

くるみ

JSのマウス関連のイベントって何あったっけ?

ということで今回は

JavaScriptのマウス関連のイベントって何あったっけ?
とりあえず基本的なマウス操作のイベントを知りたい

という方に向けてJavaScriptの「マウス関連のイベント」をまとめました。

初学者の備忘録ゆえに至らない点もあると思いますが参考になれば幸いです⸝⸝- ̫ -⸝⸝

お品書き

JavaScriptのマウスイベント一覧
マウス操作時に取得できる座標一覧
- 実際に座標を取得してみるとこんな感じ
まとめ

JavaScriptのマウスイベント一覧

mousedown

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

・・・

mousedownではその要素の上でボタンを押すと処理が行われます。

ハンバーガーの上でマウスを操作してみてね

くるみ

mouseup

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

・・・

mouseupではその要素の上でボタンを離すと処理が行われます。

mousemove

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

・・・

mousemoveではその要素の上でマウスを動かすと処理が行われます。

mouseenter

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

・・・

mouseenterではマウスがその要素の上に乗ると処理が行われます。

mouseleave

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

・・・

mouseleaveではマウスがその要素の上から離れると処理が行われます。

mouseover

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

・・・

mouseoverではマウスがその要素の上に乗ると処理が行われます。

mouseenterと一見同じに見えますが、mouseoverはバブリングします。

「ハブリング」ってのはイベントが親要素にも伝わることだね

くるみ

参考ちゃんと知ってる？JavaScriptのイベントバブリングを学ぼうWPJ

mouseout

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

・・・

mouseoutではマウスがその要素の上から離れると処理が行われます。

mouseleaveと一見同じに見えますが、mouseoutはバブリングします。

マウス操作時に取得できる座標一覧

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

マウス操作時のイベントの座標では以下のものを取得できます。

offsetX	要素からのX座標
offsetY	要素からのY座標
pageX	ページ左上からのX座標
pageY	ページ左上からのY座標
clientX	ブラウザ左上からのX座標
clientY	ブラウザ左上からのY座標
screenX	端末左上からのX座標
screenY	端末左上からのY座標