jqueryでクリックイベントを動的に追加する手順の詳細な説明-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-05-25 13:36:15

オリジナル

2060 人が閲覧しました

今回は、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 ) {} );

ログイン後にコピー

优点：