ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery_jquery での delegate と on の使用法と違いの詳細な分析

jQuery_jquery での delegate と on の使用法と違いの詳細な分析

WBOY
WBOYオリジナル
2016-05-16 17:02:30871ブラウズ

jQuery1.7 では、.delegate() は .on() に置き換えられました。以前のバージョンと同様に、イベント委任の最も効率的な手段が引き続き使用されます。
イベント バインディングと委任では、delegate() 以降は通常同等です。

.delegate() は、指定された要素 (選択された要素の子要素) に 1 つ以上のイベント ハンドラーを追加し、これらのイベントが発生したときに実行する関数を指定します。

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

// jQuery 1.4.3
$( elements ).delegate( selector, events, data, handler );
// jQuery 1.7
$( elements ).on( events, [selector], data, handler );

例: .delegate() コード:
コードをコピー コードは次のとおりです。次のように:

$("table").delegate("td","click",function(){
alert("hello");
});

.on() コード:
コードをコピー コードは次のとおりです以下:

$("table").on("click", "td", function() {
alert("hi");
});

追伸: 2 違いは、セレクターとイベントの順序が異なることです。
デリゲートおよび on メソッドによって選択される要素の子要素は、「正当な」子要素である必要があります。たとえば、
コードをコピー コードは次のとおりです。

$("table") .delegate("ボタン ","クリック",function(){...});
$("テーブル").on("クリック", "p", function(){...}) ;

は機能しません。通常の状況では、テーブルのサブ要素は tr、td... である必要があるためです。

on(events,[selector],[data],fn)、パラメーター [selector] はオプションです。
イベントをトリガーするフィルターのセレクター要素の子孫のセレクター文字列。
例:

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

$(" table").on("click", ".td1", function() {
alert("hi");
});

テーブルの子要素をクラスでフィルタリングするtd1

デリゲートのセレクターは必須です。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。