どうもおはようポテト(@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はバブリングします。
くるみ
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座標 |
実際に座標を取得してみるとこんな感じ
くるみ
まとめ
以上、JavaScriptのマウスイベントの一覧でした。参考になれば幸いです!では⸝⸝- ̫ -⸝⸝
プログラミング、楽しく学んでみない?
TechAcademy(テックアカデミー)
最短4週間で未経験からプロを育てるオンライン完結のスクール。受講生に1人ずつ現役のプロのパーソナルメンターがつき、チャットで質問すればすぐに回答が返ってくるのでサポート体制も万全です。
DMM WEBCAMP COMMIT
磨き上げられた「実践的なスキルが身につく」学習カリキュラムにより、どこよりも高い「継続率」「修了率」「転職率」で受講者満足度も90%以上。プログラミング未経験の方でも安心なスクールです。
CodeCamp(コードキャンプ)
- レッスン満足度94.6%、現役エンジニアから実践的なスキルを学べる
- 就職/転職やキャリアについての相談も無料でできる
評価 おすすめポイント 実績No.1のオンライン・プログラミングスクール(受講者20,000名以上) オンラインで365日/7時〜24時まで、時間と場所を選ばずに自分のペースで学習でき、PCとネット環境があればすぐに学習が始められます。更に無料体験レッスンを受講すると受講料が1万円引に。