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

HTMLの要素上でマウスホイールが上下に回転したときにスクリプトを実行する方法

HTMLのonwheel属性は、要素の上でマウスホイールを上下に回転（スクロール）させたときに発生するイベントハンドラです。この属性を利用すると、ユーザーがマウスホイールを操作した瞬間に任意のJavaScript関数を実行できます。

例えば、見出しの上でホイールを回すと文字色が変わるといった、インタラクティブな演出も簡単に実装可能です。以下のサンプルコードを実行して、onwheel属性の実際の動作を確認してみてください。

サンプルコード

<!DOCTYPE html>
<html>
   <body>
      <h3 id = "myid" onwheel = "mouseWheel()">
         This is demo heading.
      </h3>
      <p>Click above and use mouse wheel to change the heading color.</p>
      <script>
         function mouseWheel() {
            document.getElementById("myid").style.color = "red";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、<h3>要素に対してonwheel属性を設定しています。ユーザーがその見出しの上でマウスホイールを回転させると、mouseWheel()関数が呼び出されます。

関数の内部では、document.getElementById()メソッドによってIDが「myid」の要素を取得し、style.colorプロパティを「red」に変更しています。その結果、マウスホイールを操作するだけで見出しの文字色が赤色に変化します。

なお、onwheelイベントはマウスホイールの回転方向（上回転・下回転）に関係なく発生するため、回転方向に応じて異なる処理を行いたい場合は、イベントオブジェクトのdeltaYプロパティの値を判定するとよいでしょう。

  1. HTMLで要素がフォーカスを取得したときにスクリプトを実行する方法

    HTMLでは、onfocus属性を使用することで、要素がフォーカスを取得した瞬間にJavaScriptを実行できます。 onfocus属性とは onfocus属性は、テキスト入力欄やボタンなどのフォーム要素がユーザーによって選択され（フォーカスされ）、入力可能な状態になったときに、指定したスクリプト（関数）を呼び出すイベントハンドラです。 主な活用シーンとしては、以下のようなものが挙げられます。 入力欄がフォーカスされたときに背景色を変えて、現在どの項目を編集中か視覚的に強調する 入力欄のプレースホルダーやヒントテキストを表示する バリデーションメッセージやガイダンスを動的に切り替える 実

  2. HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法

    HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文