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

JavaScriptのonmouseoverイベントとは？基本の使い方をサンプルコード付きで解説

onmouseoverイベントは、マウスポインタが要素の上に移動した（重なった）瞬間に発生するイベントです。ボタンやリンク、画像など任意のHTML要素に設定でき、マウスがその領域に入ったタイミングで指定した処理を実行できます。

onmouseoverイベントの基本的な使い方

onmouseoverイベントは、HTML要素の属性として直接記述する方法と、JavaScriptのaddEventListener()メソッドで登録する方法の2つがあります。ここでは、理解しやすい属性に直接指定するシンプルな例を紹介します。

サンプルコード

以下のコードを実行すると、テキストの上にマウスカーソルを移動させたときにアラートが表示されます。実際に動きを確認しながら、onmouseoverイベントの仕組みを学んでみましょう。

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

コードの解説

この例では、<p>要素にonmouseover属性を設定し、マウスが乗った瞬間に関数sayHello()を呼び出しています。関数内ではalert()メソッドを使用して「Mouse Over」というメッセージを表示する仕組みです。

関連イベント：onmouseoutとの違い

onmouseoverとよく比較されるのがonmouseoutイベントです。onmouseoverはマウスが要素に「入った」瞬間に、onmouseoutは要素から「出た」瞬間にそれぞれ発生します。両者を組み合わせることで、ホバー時の表示切り替えなど、より高度なインタラクションを実現できます。

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

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

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

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