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

onmouseoverイベントからJavaScript関数を呼び出す方法を解説

onmouseoverイベントは、マウスカーソルを要素の上に重ねた瞬間に発生します。このイベントを利用すると、ユーザーが特定の要素にマウスを乗せたタイミングで、任意のJavaScript関数を実行できます。

onmouseoverイベントの仕組み

onmouseoverは、HTML要素の属性として直接記述する方法と、JavaScript側からイベントリスナーを登録する方法の2つで利用できます。また、マウスが要素から離れたときに発生するonmouseoutイベントと組み合わせることで、マウスオーバー時とマウスアウト時で異なる処理を実行することも可能です。

サンプルコード

以下の例では、div要素にonmouseoverイベントとonmouseoutイベントを設定し、それぞれ別のJavaScript関数を呼び出しています。実際にブラウザで実行して、マウスを動かしたときの挙動を確認してみてください。

<html>
   <head>
      <script>
         <!--
            function over() {
               document.write ("Mouse Over");
            }
            function out() {
               document.write ("Mouse Out");
            }
         //-->
      </script>
   </head>
   <body>
      <p>マウスをdiv要素の上に乗せると、結果が表示されます：</p>
      <div onmouseover="over()" onmouseout="out()">
         <h2> これはdiv要素の中身です </h2>
      </div>
   </body>
</html>

コードの解説

このサンプルでは、以下の流れで処理が実行されます。

1. マウスがdiv要素の上に乗ると、onmouseoverイベントが発生し、over()関数が呼び出されて「Mouse Over」というテキストが表示されます。
2. マウスがdiv要素から離れると、onmouseoutイベントが発生し、out()関数が呼び出されて「Mouse Out」というテキストが表示されます。

より実践的な書き方

上記の例で使っているdocument.write()は、ページの読み込み後に実行するとページ全体が上書きされてしまうため、現在ではあまり推奨されていません。実際の開発では、以下のようにtextContentを使って特定の要素の内容だけを書き換える方法が一般的です。

<html>
   <head>
      <script>
          function over() {
             document.getElementById("msg").textContent = "Mouse Over";
          }
          function out() {
             document.getElementById("msg").textContent = "Mouse Out";
          }
      </script>
   </head>
   <body>
      <p id="msg">マウスを下の要素に乗せてください</p>
      <div onmouseover="over()" onmouseout="out()">
         <h2> これはdiv要素の中身です </h2>
      </div>
   </body>
</html>

さらに、HTML属性に直接イベントを書く代わりに、addEventListener()メソッドを使ってJavaScriptから登録する方法もあります。HTMLとJavaScriptを分離できるため、コードの保守性が向上します。

document.getElementById("target").addEventListener("mouseover", over);
document.getElementById("target").addEventListener("mouseout", out);

まとめ

onmouseoverイベントを使えば、マウスが要素に乗ったタイミングでJavaScript関数を簡単に呼び出せます。HTML属性への直接指定は手軽ですが、実務ではaddEventListener()によるイベント登録や、textContentによる表示更新が推奨されます。用途に応じて適切な方法を選択しましょう。

  1. JavaScript関数からオブジェクトを返す方法をわかりやすく解説

    JavaScriptの関数からオブジェクトを返すには、return文を使用します。オブジェクト内のプロパティやメソッドにアクセスする際は、thisキーワードを活用すると便利です。この記事では、実際のコード例を使いながら、JavaScript関数からオブジェクトを返す基本的な方法を解説します。基本的な考え方JavaScriptでは、オブジェクトの中にメソッド（関数）を定義できます。そのメソッド内でreturn文を使えば、処理結果や値を呼び出し元に返すことができます。また、thisキーワードを参照することで、同じオブジェクト内の他のプロパティにアクセス可能です。サンプルコード以下のコードでは、従業

  2. JavaScriptである関数から別の関数へイベントオブジェクトを渡す方法

    JavaScriptでは、イベントハンドラ内で取得したイベントオブジェクトを、そのまま引数として別の関数へ渡すことができます。イベントオブジェクトには発生元の要素（event.target）やイベントの種類などの情報が含まれているため、複数の関数で同じイベント情報を共有したい場合にとても便利です。以下は、クリックイベントのイベントオブジェクトを受け渡し、ボタンのフォントサイズと文字色を変更するサンプルコードです。サンプルコード<!DOCTYPE html> <html lang="en"> <head> <meta charset=