jQuery .on と hover を使うことは可能ですか? 質問する

Question

( JavaScript で生成された要素を使用する必要がある場合は、この回答の最後の編集を参照してください.on())

JavaScript を使用して設定されていない要素にはこれを使用します。

$(".selector").on("mouseover", function () {
    //stuff to do on mouseover
});

.hover()独自のハンドラーがあります:http://api.jquery.com/hover/

複数の処理を実行したい場合は、.on()次のようにハンドラー内で連鎖させます。

$(".selector").on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
});

下記の回答によれば、hoverをとともに使用できます.on()が、次の点が異なります。

新しいコードでは強く推奨されませんが、疑似イベント名「hover」が文字列「mouseenter mouseleave」の省略形として使用されているのを目にすることがあります。これは、これら 2 つのイベントに対して 1 つのイベントハンドラをアタッチし、ハンドラは event.type を調べて、イベントが mouseenter か mouseleave かを判断する必要があります。疑似イベント名「hover」を、1 つまたは 2 つの関数を受け入れる .hover() メソッドと混同しないでください。

また、これを使用してもパフォーマンス上の利点はなく、またはだけを使用するよりも大きくなりますmouseenter。mouseleave私が提供した回答では、必要なコードが少なく、このようなことを実現するための適切な方法です。

編集

この質問に回答してからしばらく経ちましたが、注目を集めているようです。上記のコードはそのままですが、元の回答に何か追加したいことがあります。

私はmouseenterとを使うことを好みますがmouseleave（コード内で何が起こっているか理解するのに役立ちます）、.on()それを使うと、次のように書くのと同じです。hover()

$(".selector").hover(function () {
    //stuff to do on mouse enter
}, 
function () {
    //stuff to do on mouse leave
});

元の質問ではを適切に使用する方法を尋ねていたのでon()、hover()の使用方法を修正しようと思いましたが、その時点ではコードon()を追加する必要はないと判断しました。hover()

2012年12月11日編集

以下で提供されているいくつかの新しい回答では、問題.on()のが JavaScript を使用して入力された場合にどのように動作するかを詳しく説明しています。たとえば、次のようにjQuery のイベントを使用しdivてを入力するとします。div.load()

(function ($) {
    //append div to document body
    $('<div class="selector">Test</div>').appendTo(document.body);
}(jQuery));

上記のコードは.on()使えません。代わりに、次のようにコードを少し変更する必要があります。

$(document).on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, ".selector"); //pass the element as an argument to .on

このコードは、イベントが発生した後に JavaScript で設定された要素に対して機能します.load()。引数を適切なセレクタに変更するだけです。

2023年1月編集

これは古いものですが、少し混乱し、ぐるぐる回っているような感じだったので、共有しようと思いました。しかし、ラッパーをターゲットにする必要があるという domsubtreemodifer ロジックを適用しました。

jQuery が時間の経過とともに変更されたかどうかはわかりませんが、ターゲットを追加するコンテナーも含める必要があります。

たとえば次のようになります。

あなたのDOMは次のようになります:

<div class="taggable">
</div>

jQueryでdivを追加すると

$('.taggable').append('<div class="close"><div>');

DOM は最終的に次のようになります。

<div class="taggable">
   <div class="close"></div>
</div>

したがって、マウスイベントが機能するには、追加した要素だけでなくコンテナもターゲットにする必要があります。

$(document).on({
    mouseenter: function () {
    },
    mouseleave: function () {
    }
}, ".taggable .close");

$(function () {
  $('.taggable').append('<div class="close">testme<div>');
});


    $(document).on({
        mouseenter: function () {
        console.log('mouseenter');
        },
        mouseleave: function () {
        console.log('mouseleave');
        }
    }, ".taggable .close");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="taggable">
</div>

Answer 1