JavaScriptでマウスを動かした時に処理を発動させる方法

この記事では、JavaScriptのaddEventListener()でマウスを動かした時に指定した処理を発動させる方法について見ていきたいと思います。

addEventListener()とは

addEventListener()は、指定したイベントが発生した時に指定した処理を発動させることのできるメソッドです。

addEventListener()の書き方

対象.addEventListener(イベントの種類, 処理)

※対象には、読み込まれたwebページである「document」やHTML要素を指定します。
※処理の内容は、関数で指定します。

マウスを動かした時にイベントを発動させる方法

書き方

対象.addEventListener(“mousemove”, 処理)

例

let posX = document.getElementById("posX");
let posY = document.getElementById("posY");

document.addEventListener("mousemove", e => {
  posX.textContent = "X座標：" + e.clientX;
  posY.textContent = "Y座標：" + e.clientY;
});

この例では、マウスポインタをページ内で動かした時にそのX座標とY座標が表示されるという内容になっています。

こうですね。マウスポインタを動かす度にX座標・Y座標の値が変わっていますね。

まとめ

このように、addEventListener()のイベントの種類を「mousemove」で指定することで、マウスを動かした時に指定した処理を発動させることができます。

なお、addEventListener()の他のイベントについては、以下のページで説明をしています。
・JavaScriptでコピー時に処理を発動させる方法
・JavaScriptでフォーカス時に処理を発動させる方法
・JavaScriptでキー入力時に処理を発動させる方法
・JavaScriptで要素を変更した時に処理を発生させる方法
・JavaScriptでクリック時に処理を発動させる方法