【HTML】マウスポインタが要素上を移動している間にスクリプトを実行する方法（onmousemove属性）
HTMLでは、onmousemove属性を使うことで、マウスポインタが要素の上を移動している間、継続的にJavaScriptの処理を実行できます。ポインタが要素内で動くたびにイベントが発生し、そのたびに指定した関数が呼び出される仕組みです。
onmousemove属性とは
onmousemoveは、マウスカーソルが対象の要素の上で動いている間、何度も繰り返し発火するイベントハンドラです。要素に乗った瞬間に一度だけ発生する「onmouseover」とは異なり、動き続けている限り何度でもトリガーされる点が特徴です。
実装例
以下のコードは、見出し（h3要素）の上でマウスを動かすと、文字色が赤に変わるシンプルなサンプルです。
<!DOCTYPE html>
<html>
<body>
<h3 id = "myid" onmousemove = "mouseMove()">
This is demo heading.
</h3>
<p>Click above and then release.</p>
<script>
function mouseMove() {
document.getElementById("myid").style.color = "red";
}
</script>
</body>
</html>コードの解説
このサンプルのポイントは以下の通りです。
1. イベントの設定：h3要素に「onmousemove = "mouseMove()"」を指定することで、その要素上でマウスが動くたびにmouseMove()関数が実行されます。
2. スタイルの変更：関数内では「document.getElementById("myid")」で要素を取得し、「style.color = "red"」によって文字色を赤に変更しています。
3. 動作のタイミング：マウスカーソルが見出しの上を移動している間は、イベントが連続的に発生し続けます。
関連イベントとの違い
似た名称のイベントと混同しやすいので、違いを整理しておきましょう。
onmouseover：ポインタが要素に乗った瞬間に一度だけ発生します。
onmouseout：ポインタが要素から離れた瞬間に発生します。
onmousemove：要素上でポインタが動いている間、繰り返し発生します。
このように、マウスの動きに応じてリアルタイムに処理を行いたい場合は、onmousemove属性が最適です。ドラッグ操作の追跡や、カーソル位置に合わせたインタラクティブな演出など、さまざまな場面で活用できます。
-
HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法
HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実
-
HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法
HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文