ホームページ >ウェブフロントエンド >フロントエンドQ&A >jqueryイベント委任メソッドとは何ですか?

jqueryイベント委任メソッドとは何ですか?

青灯夜游
青灯夜游オリジナル
2022-03-10 16:59:575431ブラウズ

jquery イベント委任メソッドには次のものが含まれます: 1. Blind() メソッド、主に選択された要素にイベントをバインドするために使用されます; 2. live() メソッド、現在または将来のイベント ハンドラーに 1 つ以上の一致する要素を追加します。 . delegate() メソッド; 4. on() メソッド、リスニング イベントを最も近い親要素にバインドするために使用されます。

jqueryイベント委任メソッドとは何ですか?

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

イベント委任とは何ですか?

子要素のイベントは、イベント自体をバインドするために子要素に割り当てるのではなく、親要素に委任され、イベントが発生したときに対応するevent.targetを見つけます。

これは、イベント バブリングを使用し、特定の種類のすべてのイベントを管理するために 1 つのイベント ハンドラーのみを指定することを指します。

イベント委任を使用する理由

js でページに追加されるイベント ハンドラーの数は、ページ全体の実行パフォーマンスに影響を与えるためです。

第 2 に、イベント ハンドラーを 1 つ追加するのは非常に面倒です。

for ループを介してイベントを ul の下の li に走査してバインドすると、問題がないように見えますが、実際、これはページのパフォーマンスに大きな影響を与えます。

現時点では、バブリング モードのイベント委任を使用して問題を解決していますが、ul にバインドされているイベントについて考えると、すべてのことがうまくいくわけではありません。導入後の影響は?

このケースでは新しい概念が導入されています: イベント ソース: イベントがどの要素にバインドされているかに関係なく、実際にイベントをトリガーするターゲットを指します

event.target

eg:ul.onclick=function(event){}

簡単なポイントは、DOM アクセスを減らし、メモリを減らし、ページの実行パフォーマンスを向上させることです

jquery イベント委任メソッド

とは1.ブラインドの定義と使用法

: 主にイベントを選択した要素にバインドするために使用されます

文法:

blind("事件类型",data,function(){ });
//data是传入函数的参数用event.data获取(平时用的.click()等都是其简化用法)

機能; 静的ページに適しており、呼び出されたときにすでに存在する要素にのみバインドでき、将来追加される要素にはバインドできません

ページが読み込まれたとき、ブラインドを実行します;

2. live (1.7 以降はサポートされません)

定義: 現在または将来のイベント ハンドラーに 1 つ以上のイベント ハンドラーを追加します。要素の一致;

文法:

live("事件类型",data, 函数名);//data可选

特徴: live はイベントをそれ自体 (this) にバインドするのではなく、this.context

にバインドします イベント委任メカニズムが使用されますイベントの監視と処理を完了し、ノードの処理をドキュメントに委任します。

新しく追加された要素は再度リスナーにバインドする必要はなく、複数のイベント処理

を配置するだけで済みます。直接選択の場合 要素の背後

#3、デリゲート

定義: イベントがより早くバブルアップする可能性があるため、リッスン イベントを最も近い親要素にバインドします

構文:

delegate(selector,type,[data],fn)

特徴: 狭い範囲でイベント プロキシをより正確に使用でき、パフォーマンスは .live() よりも優れています。動的に追加された要素に使用できます。

("父级选择器").delegate(".a","click",function())//表示:.a的事件通过父级元素进行委托,(this)获取的是触发事件的子元素

4, on

Definition; リスニング イベントを最も近い親要素にバインドします

構文:

on(type, 选择器,方法)

機能:親要素の下に新しく追加されたタグのイベント監視を使用することもできます

複数回のイベント処理もサポートします

[推奨学習:

jQuery ビデオ チュートリアル

, ウェブ フロントエンド ビデオ]

以上がjqueryイベント委任メソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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