jqueryイベント委任イベントプリバインドの実装
979 ワード
イベント依頼は、サブエレメントに登録されたイベントを親エレメントに登録します.その原理は、イベントバブルです.イベントバブルとは、現在の要素がトリガーしたイベントが1級1級上に伝達され、親にこのイベントがあればトリガーされ、なければトリガーされず、実際には親にこのイベントが登録されていなくても伝達され、トリガーされないだけです.
要素は次のとおりです.liバインドのクリックイベントを指定する必要があります.
通常のバインディングイベント:
このようにするには2つの弊害がある.とても資源を費やして、この方式はすべてのliにすべてイベントを加えたので、liの個数が少ないならまだしも、liが多ければとても資源を費やします.2.後期にliを動的に追加した場合、このポップアップイベントは存在しません.
委任バインディングイベント:
または、
これにより、後期にliが動的に追加されても、このクリックポップアップイベントが存在し、イベントの事前バインドが実現されます.
要素は次のとおりです.liバインドのクリックイベントを指定する必要があります.
- 1111
-
- 2222
-
- 3333
-
- 4444
-
通常のバインディングイベント:
$('#list li').click(function(){
alert('hello world!');
});
このようにするには2つの弊害がある.とても資源を費やして、この方式はすべてのliにすべてイベントを加えたので、liの個数が少ないならまだしも、liが多ければとても資源を費やします.2.後期にliを動的に追加した場合、このポップアップイベントは存在しません.
委任バインディングイベント:
$(document).on('click', '#list li', function() {
alert('hello world!');
});
または、
$('#list').on('click', 'li', function() {
alert('hello world!');
});
これにより、後期にliが動的に追加されても、このクリックポップアップイベントが存在し、イベントの事前バインドが実現されます.