JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのonmousemoveイベントとは？基本的な使い方を解説

onmousemoveイベントは、マウスポインタが要素の上で移動するたびに発生するJavaScriptのイベントです。ユーザーがマウスを動かすたびに指定した関数を実行できるため、ツールチップの表示やドラッグ操作、カーソルに追従するアニメーションなど、インタラクティブなWebページを作成する際に活用されます。

onmousemoveイベントの基本構文

HTML要素に直接属性として記述する方法と、JavaScriptでaddEventListenerを使う方法があります。ここでは、HTML属性に直接指定するシンプルな例を紹介します。

サンプルコード

以下のコードを実行すると、テキストの上でマウスを動かすたびにアラートが表示され、onmousemoveイベントの動作を確認できます。

<html>
   <head>
      <script>
         <!--
            function sayHello() {
               alert("Mouse Move")
            }
         //-->
      </script>
   </head>
   <body>
      <p onmousemove = "sayHello()">これはonmousemoveイベントのデモ用テキストです。</p>
   </body>
</html>

コードの解説

この例では、<p>要素にonmousemove = "sayHello()"を指定しています。マウスポインタがこの段落の上で動くと、sayHello()関数が呼び出され、「Mouse Move」というアラートが表示されます。

addEventListenerを使った書き方

よりモダンな書き方としては、addEventListenerメソッドを使用する方法があります。

document.getElementById("demo").addEventListener("mousemove", function() {
   alert("Mouse Move");
});

この方法ならHTMLとJavaScriptを分離でき、コードの保守性が向上します。

関連するマウスイベント

onmousemoveと合わせて覚えておくと便利なマウスイベントを紹介します。

  • onmouseover： マウスポインタが要素に乗ったときに1回だけ発生
  • onmouseout： マウスポインタが要素から離れたときに発生
  • onmousedown： マウスボタンが押されたときに発生
  • onmouseup： マウスボタンが離されたときに発生

onmousemoveはマウスが動くたびに何度も発生するため、処理が重い場合はパフォーマンスに注意が必要です。必要に応じて、イベント発生回数を制御する「スロットリング」などの工夫を行うとよいでしょう。

  1. JavaScriptのoninputイベントとは？基本的な使い方を実例付きで解説

    oninputイベントは、テキストボックスなどの入力フィールドにユーザーが値を入力したタイミングで発生するJavaScriptのイベントです。文字を入力したり削除したりするたびに即座に処理が実行されるため、入力内容のリアルタイム表示やバリデーションなど、インタラクティブなWebページを作成する際に非常に便利です。 oninputイベントの基本的な実装例 以下のコードでは、テキストボックスに入力された内容を取得し、その場ですぐに画面へ表示しています。 <!DOCTYPE html> <html>    <body>  &

  2. JavaScriptのイベントキャプチャとは？仕組みと実装方法を解説

    イベントキャプチャ（Event Capturing）とはイベントキャプチャとは、発生したイベントがDOMツリーの最上位要素からターゲット要素へと向かって伝播していく仕組みのことです。これは、ターゲット要素から最上位要素へと逆方向にイベントが伝わるイベントバブリング（Event Bubbling）とは正反対の動作になります。なお、DOMにおけるイベント伝播は「キャプチャフェーズ」「ターゲットフェーズ」「バブリングフェーズ」の3段階に分かれており、イベントキャプチャはその最初の段階に相当します。windowやdocumentなどの上位ノードから順に、下位ノードへとイベントが降りていくイメージです。