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

HTMLのonmousemoveイベント属性とは？構文・使い方をサンプルコード付きで解説

onmousemoveイベント属性は、HTMLドキュメント内の要素上でマウスポインタが移動している間に発生するイベント属性です。マウスが要素の上で少しでも動くたびに、指定したJavaScriptの処理が繰り返し実行されます。

似たようなイベントに「onmouseover」がありますが、こちらはポインタが要素に乗った瞬間に一度だけ発生するのに対し、onmousemoveは要素上でマウスが動き続けている限り何度も発生するという違いがあります。

onmousemoveイベント属性の構文

基本的な構文は以下のとおりです。

<tagname onmousemove="script"></tagname>

「script」の部分には、イベントが発生したときに実行したいJavaScriptの関数名やコードを記述します。

onmousemoveイベント属性のサンプルコード

次の例では、赤い円（div要素）にonmousemoveイベント属性を設定しています。円の上でマウスを動かすと背景色が変化し、マウスが円から離れると別の色に切り替わります。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .circle {
        background: #db133a;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        margin: 10px auto;
    }
    p {
        margin: 30px auto;
    }
</style>
</head>
<body>
<h1>HTML onmousemove Event Attribute Demo</h1>
<div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div>
<p>Try to move the cursor over the red circle</p>
<script>
    function mouseMoveFn() {
        document.querySelector('.circle').style.background = '#2274A5';
    }
    function mouseOutFn() {
        document.querySelector('.circle').style.background = '#0B6E4F';
    }
</script>
</body>
</html>

コードのポイント

  • div要素にonmousemove属性を設定し、マウスが円の上で移動するとmouseMoveFn()関数を呼び出します
  • 同時にonmouseout属性も設定しており、マウスが円から離れたタイミングでmouseOutFn()関数を実行します
  • mouseMoveFn()では、querySelector()メソッドでcircleクラスの要素を取得し、背景色を青色（#2274A5）に変更します
  • mouseOutFn()では、同じ要素の背景色を緑色（#0B6E4F）へと切り替えます

出力結果

HTMLのonmousemoveイベント属性とは？構文・使い方をサンプルコード付きで解説

ブラウザで表示すると、画面中央に赤い円が表示されます。この赤い円の上にマウスカーソルを移動して、onmousemoveイベント属性の動作を確認してみましょう。

HTMLのonmousemoveイベント属性とは？構文・使い方をサンプルコード付きで解説


カーソルを円の上で動かすとonmousemoveイベントが発生し、円の背景色が青色に変化します。さらにマウスを円の外側へ移動させると、今度はonmouseoutイベントによって背景色が緑色へと切り替わります。

HTMLのonmousemoveイベント属性とは？構文・使い方をサンプルコード付きで解説

このようにonmousemoveイベント属性を活用することで、マウスの動きにリアルタイムに反応する動的な表現を手軽に実装できます。ツールチップの表示やドラッグ操作、ホバー時のアニメーションなど、さまざまな場面で応用できるので、ぜひ実際にコードを書いて試してみてください。

  1. HTMLのonmousedownイベント属性とは？使い方とサンプルコードを解説

    HTMLのonmousedownイベント属性は、HTMLドキュメント内の要素上でマウスボタンが押し下げられた瞬間に、指定したJavaScriptを実行するためのイベント属性です。onclickイベントはボタンを「押して離す」まで待つ必要がありますが、onmousedownは「押した瞬間」に即座に反応できる点が特徴です。 基本構文 onmousedownイベント属性の構文は以下のとおりです。 <tagname onmousedown="script"></tagname> サンプルコード 次の例では、赤い円形の要素にonmousedownイベント属性

  2. HTMLのonmouseupイベント属性とは？使い方とサンプルコードをわかりやすく解説

    HTMLのonmouseupイベント属性は、HTML要素上でマウスボタンが押された後に離された瞬間（ボタンアップ）にスクリプトを実行するためのイベント属性です。クリック操作の中でも「押して離す」動作の完了タイミングを検知したい場合に活用できます。基本構文onmouseupイベント属性は、以下のように対象となるタグに直接記述します。<tagname onmouseup="script"></tagname>実際の使用例ここでは、赤い円形の要素に対してマウスボタンを押したとき（onmousedown）と離したとき（onmouseup）で、それぞれ異なる処