Jquery の .bind()、.live()、.delegate()、.on() の違いの例を共有する

この記事では主に、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带来了很多方面的一致性，并希望让事情变得不那么混乱。

优点:

• 使各种事件绑定方法一致。

• 因为在Jquery源码中.bind() ， .live() 和.delegate()方法实际上是调用了此方法，因此简化了jQuery代码库并删除了一级重定向。

• 这种方式仍然提供了使用.delegate()方法的优点，并且仍然提供对.bind()方法的支持，如果你需要的话。

缺点:

• 给人带来了一些疑惑，因为方法的实际执行方式将根据你如何调用方法而改变。

总结

如果你对不同的绑定事件方法有所迷惑，那么不要担心，因为API发展了一段时间了，有很多前人的经验可以借鉴。也有很多人将这些方法视为魔法，不过一旦你了解了他们工作背后的原理，将帮助您了解如何更好地处理项目。
以下是这篇文章的精华所在...

• 使用.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上

• 你应该停止使用.live()方法因为它被弃用了同时也会带来很多问题

• 使用.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理

• 新的.on()方法其实就是模拟.bind() ， .live() 和.delegate()实现的语法糖，具体取决于你如何调用它

• 新的方向是使用新的.on()方法。先熟悉语法，并开始在你的所有的Jquery 1.7版本以上的项目使用它吧！

上記の長所または短所に加えて、何か新しいことはありますか?最近 delegate() メソッドを使い始めましたか?新しい .on() メソッドについてどう思いますか?コメントであなたの考えを教えてください！ありがとう！

関連する推奨事項:

jQuery.on() 関数の使用法の詳細な説明

jQuery.on() 関数の使用例の詳細な説明

jQuery イベント binding.on() の概要と application_jquery

以上がJquery の .bind()、.live()、.delegate()、.on() の違いの例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。