Query_jquery の click()、bind()、live()、delegate() の違い

click()、bind()、および live() はすべて、イベントを実行するときに使用されるメソッドです。これらのメソッドを使用する場合は、必要に応じて選択する必要があります。

1. click() メソッドは、よく使用するクリック イベント メソッドです。

コードをコピー コードは次のとおりです:

$("a").click(function(){
alert("hello");
}) ;

をクリックすると hello が出力されます。

2. click() メソッドは、bind() メソッドの単純なメソッドです。 bind() では、フォーカス、マウスオーバー、サイズ変更などのすべての jQuery JavaScript イベント オブジェクトを type パラメーターとして渡すことができます。 jQuery ドキュメントの例を直接見てみましょう:

コードをコピーします コードは次のとおりです。

var message = "left";
$("a").bind("click", function() {
alert(message);
return false;
} );var message = "right";
$("a").bind("contextmenu", function() {
alert(message);
return false;
});

上記のコードでは、 を左クリックしても右クリックしても、出力は常に「右」になります。この問題を解決するには、次のように、メッセージをデータ パラメーターとして binding() メソッドに渡すことができます:

Copy code コードは次のとおりです:

var message = "left";
$("a").bind("click", { msg: message }, function(e) {
alert( e.data.msg);
return false;
});var
message = "right";
$("a").bind("contextmenu", { msg: message } , function(e) {
alert(e.data.msg);
return false;
});

左クリックするとこうなります < ;a> を右クリックすると「左」が出力され、 を右クリックすると「右」が出力されます。

通常の状況では click() メソッドを使用するだけで済むことがわかりますが、上記の状況に対処する必要がある場合は、bind() メソッドを使用する必要があります。

3.live() は、要素が後で追加された場合でも、一致するすべての要素にイベント ハンドラーをアタッチします。 は次のとおりです:

コードをコピーします コードは次のとおりです:

$("div .live").bind("click", function() {
alert("success");
});

このとき、 liveクラスのdivをクリックすると「success」が出力されます。このとき、新しい要素を追加する場合は次のようになります。

コードをコピー コードは次のとおりです。 🎜>

$("

live

").appendTo("body");

このとき、上記を使用した場合、class live のメソッドが a タグをクリックしても実行されません。その理由は、この要素は、bind() の呼び出し後に追加され、live() メソッドを使用すると、次のように、後で追加された要素でも対応するイベントを実行できるためです。 code

コードは次のとおりです。$("div.live").live("click", function() {alert(" success ");});

このように、class live で a タグをクリックすると、後から a タグを追加すれば通常通り「success」を出力することができます。その理由については、ここでは詳しく説明しません。この記事では主にいくつかの方法の違いを比較します。



最後に、delegate() メソッドを見てみましょう。これまでのところ、このメソッドは 1.4.2 で使用できるようになっています。

live() メソッドの欠点の 1 つは、チェーン書き込みをサポートしていないことです。

コードをコピー

コードは次のとおりです:$("#test").children("a").live("mouseover", function() {alert("hello" ); });

上記の書き方では出力されません。delegate() を使用して次のように記述できます。

コードをコピーしますコードは次のとおりです:

$("#test").delegate("a", "mouseover", function() {
alert("hello");
} );

このようにして、目的の結果が正常に出力されます。この記事では、click()、bind()、live()、および delegate() メソッドについて詳しく説明しておりませんが、特定の使用方法に役立つことを願っています。