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

JavaScriptのonmouseleaveイベントとは？使い方とサンプルコードを解説

JavaScriptのonmouseleaveイベントは、マウスポインタが要素の上から外へ移動した（要素から離れた）タイミングで発生するイベントです。例えば、ユーザーがボタンやテキスト、画像などの上にカーソルを重ねていた状態から、その領域の外に出た瞬間に指定した処理を実行できます。

onmouseleaveイベントの基本

onmouseleaveイベントは、HTML要素の属性として直接記述するか、JavaScriptでaddEventListenerメソッドを使って登録することができます。マウスが要素から離れたときにアラートを表示したり、スタイルを変更したりといった動的な演出に活用されます。

サンプルコード

以下のコードを実行すると、onmouseleaveイベントの動作を確認できます。段落の上にマウスカーソルを重ねてから外すと、アラートが表示されます。

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

onmouseoutイベントとの違い

似たイベントにonmouseoutがありますが、両者には重要な違いがあります。onmouseoutは子要素にマウスが移動した場合にも発生しますが、onmouseleaveは子要素への移動では発生せず、要素とその子要素全体から完全にマウスが離れたときのみ発生します。このため、意図しない発火を防ぎたい場合はonmouseleaveの方が扱いやすいことが多いです。

まとめ

onmouseleaveイベントは、マウスが要素から離れたときに処理を実行したい場面で便利なイベントです。ツールチップの非表示やハイライト解除など、ユーザーの操作に応じたインタラクティブなUIを実装する際にぜひ活用してみてください。

  1. JavaScriptにおけるscreenYマウスイベントの役割とは？

    JavaScriptにおいて、screenYマウスイベントプロパティは、イベントが発生した際のマウスポインタの垂直方向（Y軸）の座標を返します。 この値は、画面（モニター）の左上を原点とした絶対的な座標として取得されるため、ブラウザウィンドウの位置に関係なく、画面全体の中でのポインタ位置を知ることができます。なお、水平方向の座標を取得したい場合は、同じく用意されている screenX プロパティを使用します。 screenYの主な特徴 マウスポインタの垂直座標（Y座標）をピクセル単位で返す 画面の左上を基準点（0, 0）とする clientY とは異なり、ブラウザの表示領域ではなく画面全体が

  2. JavaScriptのscreenXマウスイベントとは？役割と使い方を実例で解説

    マウスイベントが発生したとき、screenXプロパティは、画面（スクリーン）の左上を基準としたマウスポインタのX座標（水平方向の位置）をピクセル単位で返します。 screenXとscreenYの基本的な役割 イベントオブジェクトが持つscreenXは水平方向（X座標）、screenYは垂直方向（Y座標）を表します。この2つはブラウザウィンドウやWebページではなく、ユーザーの物理的な画面全体を基準にした座標を返す点が大きな特徴です。 似た用途の座標プロパティと比較すると、違いがより明確になります。 screenX / screenY：モニター画面全体を基準とした座標 clientX / cl