Jquery の .bind()、.live()、.delegate()、.on() の違いの例を共有する-jsチュートリアル-php.cn

この記事では主に、Jquery の .bind()、.live()、.delegate()、および .on() の違いについて説明します。.bind() と .live() は日常の開発でよく使用されます。 delegate() と .on()、一部の学生はこれら 4 つについて疑問を抱いているため、次の記事では主に .bind()、.live()、.delegate() について紹介します。これらの違いについての情報が得られることを願っています。 on() が役に立ちます。

はじめに

私は最近、多くの Web 開発者が jquery の .bind() .live() .delegate() および .on() メソッドについて多くの疑問を抱いていることを知りました。こうした混乱は通常、両者の実際の違いは何なのか、いつ使用するのかを中心に展開します。次の記事では、これら 4 つの方法の違いについて詳しく説明します。各方法について詳しく説明します。

これらの方法を詳しく理解する前に、まず始めましょう。 jquery サンプルメソッドを作成するためのサンプルとしての HTML の一般的な部分。

<ul id="members" data-role="listview" data-filter="true">
 <!-- ... 其他li ... -->
 <li>
 <a href="detail.html?id=10" rel="external nofollow" >
  <h3>John Resig</h3>
  <p><strong>jQuery Core Lead</strong></p>
  <p>Boston, United States</p>
 </a>
 </li>
 <!-- ... 其他li ... -->
</ul>

ログイン後にコピー

Bind メソッド

.bind() メソッドを使用して、イベントタイプとイベントハンドラーを選択した DOM 要素に直接登録します。この方法は最も長い間使用されており、この期間中にブラウザ間のさまざまな問題をうまく解決しました。これを使用してイベントハンドラーを接続する場合、依然として非常に簡潔ですが、以下に示すパフォーマンスの問題もいくつかあります。

/* .bind() 方法将事件类型和一个事件处理函数直接注册到了被选中的DOM元素中。 
 .click() 方法只是.bind() 方法的简写。
*/

$( "#members li a" ).bind( "click", function( e ) {} ); 
$( "#members li a" ).click( function( e ) {} );

ログイン後にコピー

.bind() メソッドは、イベントハンドラー関数を一致するすべてのタグに接続します。このアプローチは良くありません。そうすることで、一致するすべての要素にわたって追加のイベントハンドラーが暗黙的に反復されるだけでなく、これらの同じイベントハンドラーがすべての一致するタグに繰り返し追加されるため、この操作は非常に無駄 (冗長) になります。

利点:

さまざまなブラウザに適用可能
イベント処理関数の接続は非常に便利で高速です
.click()、.hover()、およびその他の略語を使用してイベント処理を接続できますより包括的な方法 Function
単純な ID セレクターの場合、.bind() メソッドを使用すると、イベントハンドラーにすばやく接続できるだけでなく、イベントがトリガーされると、ほぼ即座にイベントハンドラーが呼び出されます

欠点:

このアプローチでは、すべてのイベントハンドラーが一致するすべての要素にアタッチされます
同じセレクターを持つ要素を動的に一致させることはできません
多数の一致する要素を操作する場合、パフォーマンスに影響が生じます問題
追加操作は事前に実行されるため、ページの読み込み時にパフォーマンスの問題が発生する可能性があります

Live メソッドの使用

live() メソッドは、いわゆる「マジック」を実装するためにイベント委任の概念を使用します。。 live() メソッドは、bind() メソッドと同じように簡単に呼び出すことができます。ただし、表面下では、.live() メソッドは前者とは大きく異なる方法で実装されています。 .live() メソッドは、イベントハンドラーに関連付けられたセレクターとイベント情報をドキュメント (つまりドキュメント) のルート要素に添付します。ドキュメントにイベント情報を登録することにより、このイベントハンドラーは、ドキュメントにバブルアップするすべてのイベント (委任されたイベント、伝播されたイベントなど) がそれを呼び出すことを許可します。イベントがドキュメント要素に到達すると、JQuery はセレクターまたはイベントメタデータを使用して、どのイベントハンドラーが存在する場合に呼び出す必要があるかを決定します。この追加の作業は、ユーザー操作中のパフォーマンスに一定の影響を与えますが、イベントを登録する最初のプロセスは非常に高速です。上記の binding() メソッドの例と比較した

/* 方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document） 
 ( "#members li a" & "click" ) */

$( "#members li a" ).live( "click", function( e ) {} );

ログイン後にコピー

.bind() の例の利点の 1 つは、イベントハンドラーをドキュメント要素に何度も付加するのではなく、1 回だけ付加することです。これにより高速になるだけでなく、無駄なパフォーマンスも削減されます。ただし、この方法を使用すると、以下に示す多くの問題も発生します。

利点:

bind()のように複数回登録するのではなく、すべてのイベント処理関数は一度だけ登録されます
bind()メソッドをlive()メソッドにアップグレードするのは非常に便利です。 "bind" と "live"
DOM に動的に追加された要素も、実際のイベント情報がドキュメント要素に登録されているため、魔法のように一致します
イベントハンドラー関数は、ドキュメントが読み込まれるため、無駄になる可能性のある時間を有効に活用できます

欠点:

このメソッドは Jquery 1.7 以降のバージョンでは非推奨です。コード内での使用を徐々に諦める必要があります
このメソッドを使用する場合、連鎖操作は適切にサポートされておらず、いくつかのエラーが発生する可能性があります
行われたマッチング操作は、ドキュメント要素にイベントハンドラーを登録するためにのみ使用されるため、基本的には役に立ちません
event.stopPropogation(イベントは常にドキュメント要素に委任されているため、 ) メソッドは役に立ちません
因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。
因为你所连接的事件总是被委托到document上，所如果你的DOM的层级很深的话，这会导致一定的性能问题

使用Delegate方法

.delegate()方法与live()方式实现方式相类似，它不是将选择器或者事件信息附加到document，而是让你指定附加的元素。就像是live()方法一样，这个方法使用事件委托来正确地工作。

如果你跳过了前面关于 .live() 方法的介绍，你可能要回去重新看看它，因为这里涉及到之前我所阐述的一些内部逻辑

/* .delegate() 方法会将选择器和事件信息 ( "li a" & "click" ) 附加到你指定的元素上 ( "#members" )。
*/

$( "#members" ).delegate( "li a", "click", function( e ) {} );

ログイン後にコピー

.delegate()方法十分强大。在上面这个例子中，与事件处理函数关联的选择器和事件信息将会被附加到( #members" )这个元素上。这样做比使用live()高效多了，因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。另外，使用.delegate()方法解决许多其他问题。请参阅下方列出的详细信息。

优点:

你可以选择将选择器或者事件信息附加到指定的元素。
匹配操作实际上在前面并没有执行，而是用来注册到指定的元素。
链式操作可以得到正确的支持
Jquery仍然需要迭代这些选择器或者事件信息来匹配元素，不过因为你可以选择哪一个元素作为根元素，所以筛选的量会大幅减少
因为这项技术使用了事件委托机制，它可以匹配到被动态地添加到DOM的元素
你可以在文档加载完之前连接事件处理函数

缺点:

从.bind()方法不可以直接升级到.delegate()方法
Jquery仍然需要使用marchesSelector方法在附加到指定根元素的选择器或者事件信息中筛选决定哪一个事件处理函数会被调用。然而，附加到指定根元素的元数据会比使用live()方法的时候要小得多。
当操作大量匹配的元素时会有性能方面的问题
附加操作是在前期完成的,这可能导致页面加载时存在性能问题

使用On方法

你知道吗，在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一种方式来调用它们。当然.unbind() ， .die() 和.undelegate()方法也一样。一下代码片段是从Jquery 1.7版本的源码中截取出来的

bind: function( types, data, fn ) {
 return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
 return this.off( types, null, fn );
},

live: function( types, data, fn ) {
 jQuery( this.context ).on( types, this.selector, data, fn );
 return this;
},
die: function( types, fn ) {
 jQuery( this.context ).off( types, this.selector || "**", fn );
 return this;
},

delegate: function( selector, types, data, fn ) {
 return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
 return arguments.length == 1 ? 
  this.off( selector, "**" ) : 
  this.off( types, selector, fn );
}

ログイン後にコピー

考虑到这一点，使用.on()方法看起来像以下方式一样...

/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */

// Bind
$( "#members li a" ).on( "click", function( e ) {} ); 
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} ); 
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} ); 
$( "#members" ).delegate( "li a", "click", function( e ) {} );

ログイン後にコピー

你可能注意到了，我如何使用.on()方法决定了它如何调用其他方法。你可以认为.on()方法被具有不同签名的方法”重载“了，而这些方法实现了不同的事件绑定的连接方式。 .on()方法的出现为API带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点: