jQueryイベントハンドラを適用する最も良い方法

Question

私は20列と100 +行のグリッドに取り組んでいます。すべての列には入力フィールドがあります。今、私はchangeとkeyup、focusのような入力フィールドにeventHandlerを入れたいと思います。したがって、20 * 100のイベント= 2000年が可能です！

これを行うにはどのような方法が最適ですか？私はeventHandlersとメモリの問題について何かを読んだ。

これは私がそれを行う必要がありますどのように考えるかです：

$("#grid input").each(function() { 
    $(this).keyup(function() { 
     // 
    }); 
    $(this).change(function() { 
     // 
    }); 
}); 

それとも、これはそれを行うための最良の方法ですか？私はそうのように、イベントの委任を使用してお勧めしたい

$("#grid").keyup(function() { 
     // 
}); 

Answer 1

あなたはイベント委任を探しています。イベントは、第2のセレクタに一致する要素を通過した場合にのみjQueryのは、次に発射（#gridに）ハンドラを、添付

$("#grid").on("change", "input", function() { 
    // Handle the event here, `this` refers to the input where it occurred 
}); 

。あたかもハンドラが実際のinputにアタッチされているかのようにハンドラを呼び出します。ネイティブにバブルしないfocusのようなイベントであっても、jQueryの機構によってサポートされています。

the on documentationでさらにご覧ください。

Answer 2

：

は

$("#grid").on("keyup", "input", function() { 
    ... 
}); 

むしろ一人ひとりinputにリスナーを追加するよりも、あなただけの#gridにを追加しています。

この素晴らしい答えを1として：What is DOM event delegation?

イベントの代表団へのもう一つの利点は、（イベントバインディングの数が下がるので）イベントリスナーによって使用される総メモリフットプリントがダウンしていることです。頻繁にアンロードされる小さなページ（つまり、ユーザーが頻繁に別のページにナビゲートする）に大きな違いはありません。しかし、長寿命アプリケーションでは、それは重要な意味を持つ可能性があります。

DOMから削除された要素がまだメモリを要求している（つまり、それらがリークしている）、実際には漏れたメモリがイベントバインディングに結びついているのは、本当に追跡が困難な状況がいくつかあります。イベントデリゲートを使用すると、イベントリスナーをアンバインドすることを忘れる危険なしに（リスナーが祖先にいるため）、子要素を自由に破棄することができます。これらのタイプのメモリリークは、その後に含まれる可能性があります（削除されていない場合、時には難しいことです）。IE私はあなたを見ています。