...

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

JavaScriptのマウス関連のイベントまとめ

どうもおはようポテト(@ohayoupoteto22)です。

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

ということで今回は

  • 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座標

実際に座標を取得してみるとこんな感じ

offsetX
offsetY
pageX
pageY
clientX
clientY
screenX
screenY
0
0
0
0
0
0
0
0

 

ハンバーガーの上にマウスを乗せれば座標が表示されるよ

くるみ

まとめ

以上、JavaScriptのマウスイベントの一覧でした。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す

CAPTCHA