JavaScript

【JavaScript】mousemoveイベントとは?マウスカーソルが動いた時にイベント実行

こちらの記事では、JavaScriptのmousemove(マウスムーブ)イベントについてサンプルコードを用いて分かりやすく解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

mousemoveイベントとは

mousemoveイベントとは、イベントを設定した要素内でマウスカーソルが移動したタイミングで実行されるイベントです。

要素内の位置座標を取得したり、Canvasとmousemoveイベントを組み合わせてお絵描きアプリなどを作ることができます。

mousemoveイベントの使い方

mousemoveイベントは「addEventListenerメソッド」「onmousemoveプロパティ」「onmousemove属性」の3つの書き方があります。
▼トリガーになる要素を取得(addEventListenerとonmousemoveプロパティで使用)
const elem = document.getElementById('js-elem'); // トリガーになる要素を取得

▼addEventListenerメソッド
elem.addEventListener('mousemove',function(){ // 第一引数にmousemoveを指定
  // 処理を記述
});

▼onmousemoveプロパティ
elem.onmousemove = function(){
  // 処理を記述
};
▼onmousemove属性
<button onmousemove="mousemoveEvent()">テキスト</button>

<script>
function mousemoveEvent(){
  // 処理を記述
};
</script>

サンプルコード

こちらで紹介するサンプルコードは、背景色が朱色のコンテンツにマウスカーソルを重ねて移動させると、要素内の座標値XとYが表示されます。
<style>
#js-move{
  max-width:500px;
  height:250px;
  background:#e94709;
  display:flex;
  align-items:center;
  justify-content:center;
}
</style>

<div id="js-move">ここでマウスカーソルを移動させてね!</div>
<p>現在の座標</p>
<p>X:<span id="point-x"></span></p>
<p>Y:<span id="point-y"></span></p>

<script>
const moveElem = document.getElementById('js-move'); // ①
const pointX = document.getElementById('point-x');   // ②
const pointY = document.getElementById('point-y');   // ②
  
moveElem.addEventListener('mousemove',function(e){ // ③
  pointX.textContent = e.offsetX; // ④
  pointY.textContent = e.offsetY; // ④
})
</script>
実行結果

ここでマウスカーソルを移動させてね!

現在の座標

X:

Y:

サンプルコード解説

  1. mousemoveイベントを設定する要素を取得
  2. 座標値XYを表示させるための要素を取得
  3. ①で取得した要素に対してmousemoveイベントを設定し、座標値取得のため引数eを記述
  4. 引数eを使い座標値XYを取得し、②の変数に代入し表示させる

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村