jQuery_jqueryのon()メソッドの使用例を詳しく解説

この記事では、jQuery の on() メソッドの使用法を例とともに分析します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. jQuery on() メソッドの使用:

on(イベント,[セレクター],[データ],fn)

events: スペースで区切られた 1 つ以上のイベント タイプとオプションの名前空間（「click」や「keydown.myPlugin」など）。
selector: イベントをトリガーしたセレクター要素のフィルターの子孫のセレクター文字列。セレクターが null であるか省略されている場合、イベントは選択された要素に到達すると常に発生します。
data: イベントがトリガーされると、event.data がイベント ハンドラー関数に渡される必要があります。
fn: イベントがトリガーされたときに実行される関数。 false 値は、false を返す関数の短縮形としても使用できます。

2. jQuery on() メソッドの利点:

1. イベントの統合バインディングのメソッドを提供します

2. もちろん、必要に応じて .delegate() を直接使用することもできます。

3. .bind()、.live()、.delegate() との比較:

1. 実際、.bind()、.live()、.delegate() はすべて .on()
を通じて実装されています。

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

bind: function(types, data, fn ) {
return this.on(types, null, data, fn );
}、
アンバインド: function(types, fn ) {
return this.off(types, null, fn );
}、

live: function(types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
これを返します;
}、
Die: function(types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
これを返します;
}、

デリゲート: function( セレクター、タイプ、データ、fn ) {
return this.on(types, selector, data, fn );
}、
デリゲートを解除: function(selector, types, fn) {
// ( 名前空間 ) または ( セレクター、タイプ [, fn] )
return argument.length === 1 ? this.off( selector, "**" ) : this.off(types, selector || "**", fn );
}

2. .bind() を使用すると、一致するすべての DOM 要素に同じイベント ハンドラーがフックされます。

3. .live() はもう使用しないでください。推奨されておらず、多くの問題があります

4. .delegate() は効率を向上させる良い方法を提供し、動的に追加された要素にイベント処理メソッドを追加できます。

5. .on() を使用して上記の 3 つのメソッドを置き換えることができます

4. jQuery の on() メソッドの使用例

1. クリック イベントをバインドし、off() メソッドを使用して on() にバインドされたメソッドを削除します

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

$(document).ready(function(){
$("p").on("クリック",function(){
$(this).css("背景色","ピンク");
});
$("ボタン").click(function(){
$("p").off("クリック");
});
});

2. 複数のイベントが同じ関数にバインドされている

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

$(document).ready(function(){
$("p").on("マウスオーバー マウスアウト",function(){
$("p").toggleClass("イントロ");
});
});

3. 複数のイベントを異なる関数にバインドします

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

$(document).ready(function(){
$("p").on({
Mouseover:function(){$("body").css("background-color","lightgray");},
Mouseout:function(){$("body").css("background-color","lightblue");},
Click:function(){$("body").css("background-color"," yellow");}
});
});

4. カスタム イベントをバインドします

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

$(document).ready(function(){
$("p").on("myOwnEvent", function(event, showName){
$(this).text(showName "! なんて美しい名前でしょう!").show();
});
$("ボタン").click(function(){
$("p").trigger("myOwnEvent",["Anja"]);
});
});

5. データを関数に渡します

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

function handlerName(event)
{
アラート(event.data.msg);
}

$(document).ready(function(){
$("p").on("click", {msg: "今クリックしました!"}, handlerName)
});

6. 未作成の要素に適用可能

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

$(document).ready(function(){
$("div").on("クリック","p",function(){
$(this).slideToggle();
});
$("ボタン").click(function(){
$("

これは新しい段落です。

").insertAfter("button");
});
});

この記事が皆さんの jQuery プログラミングに役立つことを願っています。