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

onmouseoutイベントでJavaScript関数を呼び出す方法

onmouseoutイベントは、マウスカーソルがその要素の外へ移動した瞬間に発生します。このイベントを活用することで、マウスが要素から離れたタイミングで任意のJavaScript関数を実行できます。

サンプルコード

以下の例では、onmouseoverイベントとonmouseoutイベントを使い分けて、それぞれ異なるJavaScript関数を呼び出しています。onmouseoutイベントから関数を呼び出す仕組みを、実際に動かしながら確認してみましょう。

ライブデモ

<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>

コードの解説

このサンプルでは、over()とout()という2つのJavaScript関数を定義しています。div要素にはonmouseover属性とonmouseout属性が設定されており、マウスが要素に入ったときにover()が、要素から出たときにout()がそれぞれ呼び出されます。

なお、document.write()はページの読み込み完了後に実行するとドキュメント全体が上書きされてしまうため、実務ではtextContentやinnerHTMLを使って特定の要素の内容だけを更新する方法が推奨されます。


  1. JavaScriptのcall()メソッドとは？使い方と実行例をわかりやすく解説

    JavaScriptのcall()メソッドを使うと、あるオブジェクト向けに定義されたメソッドを、別のオブジェクトに対しても再利用できます。つまり、同じ関数をさまざまなオブジェクトから呼び出せるようになるのです。call()メソッドの大きな特徴は、引数（パラメータ）をカンマ区切りで個別に渡すという点です。これにより、thisの参照先を任意のオブジェクトに変更しながら、必要な値も同時に渡せます。call()メソッドの基本的な仕組みcall()は以下のような形式で使用します。関数名.call(thisArg, 引数1, 引数2, ...)第1引数（thisArg）：関数内でthisとして参照されるオ

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

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