jqueryでクリックイベントを動的に追加する手順の詳細な説明

今回は、jqueryクリックイベントを動的に追加する注意事項について詳しく説明します。以下は実際のケースです。見てみましょう。

いくつかの イベントを DOM 要素にバインドしようとするとき、通常は次の 4 つのメソッドを使用します
bind(),on(),live(),delegate()最初の 2 つのメソッドをさらに使用する必要があります。以下は、4 つのメソッドについての私の理解です:

• Bind(): .bind() は、指定された function を DOM にバインドする、これが良い解決策です。 イベント処理におけるブラウザの互換性の問題は解決されますが、この方法にはまだいくつかの問題があります。コード:

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

上記の 2 行のコードは、一致するすべての a 要素にイベント ハンドラーを追加するという同じタスクを実行します。ここには、すべての a タグにクリック イベントを追加するという効率の問題がある一方で、同じ処理が何度も実行されるため、実行中に無駄が生じます。 (それらを親要素にフックし、バブリングによってそれぞれを区別して、イベント ハンドルを実行できます)。
利点

• このメソッドは、さまざまなブラウザ間のイベント処理の互換性ソリューションを提供します

• イベントを要素にバインドするのに非常に便利です

• .click() 、 .hover()...これら非常に便利なタイムバインディングはバインドの処理を簡略化したものです

• IDで選択した要素に非常に優れており、すぐにフックできるだけでなく(ページにはIDが1つしか持てません)、イベントが発生するとハンドラーがすぐに実行可能(後のライブ、デリゲートに相当)実装方法

欠点

• フィルタリングされた要素すべてにイベントをバインドします

• それらの要素にはバインドされません実行後に動的に追加されます

• フィルタリングされた要素が多い場合、効率の問題が発生します

• ページの読み込み時、Bind()は完了時にのみ実行できるため、効率の問題が発生する可能性があります。

---

.live()
.live() メソッドは、イベント委任の概念を使用してイベント バインディングを処理します。これは、.bind() を使用してイベントをバインドするのと同じです。 .live() メソッドは、対応するイベントを、選択した要素のルート要素 (document 要素) にバインドします。その後、バブルアップするすべてのイベントをこの同じハンドラーで処理できます。その処理メカニズムは次のようになります。イベントがドキュメントに到達すると、jQuery はセレクター/イベントのメタデータを検索し、どのハンドラーを呼び出すかを決定します。ただし、最新のjqueryバージョンでは削除されているようです。

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

利点:

• ここにはイベントバインディングが 1 つだけあり、.bind() のようにすべての要素を 1 つずつバインドするのではなく、ドキュメントにバインドされます

• それらの動的に追加された要素はそのまま残ります。イベントの実際のバインドはドキュメント上にあるため、以前にバインドされたイベントをトリガーできます

• ドキュメントの準備ができる前に必要なイベントをバインドできます

欠点:

• から1.7 以降は非推奨になっているため、段階的に廃止し始める必要があります。

• チェーンは正しくサポートされていません

• event.stopPropagation()を使用する場合、ドキュメントに到達する必要があるため役に立ちません

• すべてのセレクター/イベントがドキュメントにバインドされているため、
  どのイベントが呼び出されるかを選択する matchSelector メソッドは非常に遅くなります

• イベントが発生する要素が DOM ツリーの非常に深いところにある場合、パフォーマンスの問題が発生します

---

.Delegate()
.delegate()有点像.live(),不同于.live()的地方在于，它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.推荐使用.delegate() 代替.live()

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

优点：

• 你可以选择你把这个事件放到那个元素上了 chaining被正确的支持了

• jQuery仍然需要迭代查找所有的selector/eventdata来决定那个子元素来匹配，但是因为你可以决定放在那个根元素上，所以可以有效的减小你所要查找的元素。

• 可以用在动态添加的元素上

缺点：

• 需要查找那个那个元素上发生了那个事件了，尽管比document少很多了，不过，你还是得浪费时间来查找。

---

.On()
其实.bind(), .live(), .delegate()都是通过.on()来实现的，.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的，这是1.8.2的源码：

$( "#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 ) {} );

优点：

• 提供了一种统一绑定事件的方法

• 仍然提供了.delegate()的优点，当然如果需要你也可以直接用.bind()

缺点：

• 也许会对你产生一些困扰，因为它隐藏了一前面我们所介绍的三种方法的细节。

结论：

• 用.bind()的代价是非常大的，它会把相同的一个事件处理程序hook到所有匹配的DOM元素上

• 不要再用.live()了，它已经不再被推荐了，而且还有许多问题

• .delegate()会提供很好的方法来提高效率，同时我们可以添加一事件处理方法到动态添加的元素上。

• 我们可以用.on()来代替上述的3种方法

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

CSS选择器使用方法总结

webkit-font-smoothing字体抗锯齿渲染使用案例详解

以上がjqueryでクリックイベントを動的に追加する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。