jQueryの子孫要素にイベントを追加するより良い方法は何ですか？

Question

私は両方がうまく働いた2つのアプローチを試みました。私はもう一方を使うべき理由がありますか？

最初のアプローチ：

$('div.parent').find('.cancel-btn').on('click', function(){ 
    alert('cancel clicked'); 
}); 

第二のアプローチ：

$('div.parent').on('click', '.cancel-btn', function(){ 
    alert('cancel clicked'); 
}); 

Answer 1

秒1もイベントを発生することを除いて、彼らは非常によく似ているようだドキュメントの私の読書から子要素が存在しない場合どちらが面白いですか？

これから、最初のバージョンがターゲット（.cancel-btn）要素のクリックイベントリスナを結びつけていると推測できます。リスナーが作成されたときにその要素を見つけるのに時間を費やし、clickイベントがリスナーを起動するときにDOMのトラバーサル要件はありません。

一方、2番目のオプションは、クリックイベントのリスナーを親に接続します。は、イベントが発生すると子を検索します。

したがって理論的には、2番目のオプションのユーザーの視点とのパフォーマンスの違いがあります。その影響は、ページの要素密度とツリーの構成に依存しますが、

ほとんどの場合、時間の影響はそれほど重要でないほど小さいと思います。この場合、唯一の真の違いは、子要素の存在にかかわらず、第2のオプション発射についての点である。