jQueryでマウスホバーイベントを制覇！ on vs hover徹底解説

2024-04-02

jQuery で on と hover を一緒に使うことは可能？

on メソッドと hover イベントの組み合わせ

以下のコードは、on メソッドを使って mouseenter イベントと mouseleave イベントを要素にバインドし、マウスホバー時の処理を実装しています。

$(selector).on('mouseenter', function() {
  // マウスが要素に入った時の処理
});

$(selector).on('mouseleave', function() {
  // マウスが要素から離れた時の処理
});

このコードは、従来の hover メソッドとほぼ同じように動作します。

hover メソッドとの比較

on メソッドと hover メソッドの主な違いは以下の通りです。

引数の数: on メソッドはイベント名と処理関数を引数として受け取ります。一方、hover メソッドは2つの処理関数を引数として受け取ります。1つ目はマウスが要素に入った時の処理、2つ目はマウスが要素から離れた時の処理です。
イベントの伝播: on メソッドはイベント伝播を考慮しますが、hover メソッドは考慮しません。

イベント伝播を考慮する必要がある場合: on メソッドを使う必要があります。
イベント伝播を考慮する必要がない場合: どちらを使っても構いません。

一般的には、on メソッドの方が汎用性が高いため、こちらを使うことをおすすめします。

補足

on メソッドは、イベント名の代わりにイベントオブジェクトを受け取ることもできます。
off メソッドを使って、イベントハンドラを解除することができます。

<div id="my-element">要素</div>

$(document).ready(function() {
  $('#my-element').on('mouseenter', function() {
    $(this).css('color', 'red');
  });

  $('#my-element').on('mouseleave', function() {
    $(this).css('color', 'black');
  });
});

このコードを実行すると、#my-element 要素にマウスが乗ると赤色になり、マウスが離れると黒色に戻ります。

応用例

on メソッドと hover イベントを使って、さまざまな処理を実装することができます。

画像の切り替え
メニューの表示/非表示
アニメーションの実行
ツールチップの表示

on メソッドと hover イベント以外の方法

mouseenter イベントと mouseleave イベント

$(selector).mouseenter(function() {
  // マウスが要素に入った時の処理
});

$(selector).mouseleave(function() {
  // マウスが要素から離れた時の処理
});

hover メソッド

以下のコードは、hover メソッドを使ってマウスホバー時の処理を実装しています。

$(selector).hover(function() {
  // マウスが要素に入った時の処理
}, function() {
  // マウスが要素から離れた時の処理
});

このコードは、on メソッドを使う方法よりも簡潔に記述できますが、イベント伝播を考慮しないという点に注意が必要です。

ネイティブ JavaScript

var element = document.querySelector(selector);

element.addEventListener('mouseenter', function() {
  // マウスが要素に入った時の処理
});

element.addEventListener('mouseleave', function() {
  // マウスが要素から離れた時の処理
});