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

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

onmouseoutイベントは、マウスポインタが要素の範囲から外へ移動したときに発生するイベントです。要素の上にあったカーソルが離れた瞬間にトリガーされるため、ツールチップの非表示、ドロップダウンメニューを閉じる、ホバー状態の解除など、インタラクティブなユーザーインターフェースの実装でよく利用されます。

onmouseoutイベントの指定方法

onmouseoutイベントは、HTMLタグの属性として直接記述する方法と、JavaScriptのaddEventListener()メソッドで登録する方法があります。

<p onmouseout="sayHello()">デモテキスト</p>

// addEventListener を使う場合
element.addEventListener('mouseout', function() {
  // マウスが外れたときの処理
});

使用例

以下のコードを実行して、JavaScriptにおけるonmouseoutイベントの動作を確認してみましょう。段落のテキスト上からマウスカーソルを外すと、アラートダイアログが表示されます。

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

mouseoutとmouseleaveの違い

似たイベントにmouseleaveがあります。mouseoutは子要素へマウスが移動した際にも（イベントバブリングにより）発火しますが、mouseleaveは要素そのものから完全に外れたときだけ発火します。子要素を含む複雑なレイアウトでは、意図しない発火を防ぐためにmouseleaveを選ぶのも有効です。

  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