jQuery beste Methode, Eventhandler anzuwenden

Question

Ich arbeite an einem Raster mit 20 Spalten und mehr als 100 Zeilen. Jede Spalte hat ein Eingabefeld. Jetzt möchte ich eventHandlers auf die Eingabefelder wie change und keyup, focus und vieles mehr setzen. Also kann es 20 * 100 Ereignisse = 2000 geben!

Was ist der beste Weg, dies zu tun? Ich habe etwas über eventHandlers und Speicherprobleme gelesen. Diese

ist, wie ich glaube, ich sollte es tun:

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

Oder ist dies der beste Weg, es zu tun?

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

Answer 1

Sie suchen Ereignis Delegation.

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

Die ein Handler (auf #grid) misst, die jQuery dann nur ausgelöst, wenn das Ereignis durch ein Element geleitet, um die zweite Auswahlvorrichtung entsprechen. Es ruft den Handler so auf, als wäre der Handler mit dem tatsächlichen input verbunden. Sogar Ereignisse wie focus, die normalerweise nicht bubble sind, werden durch jQuerys Mechaniken unterstützt.

Mehr in the on documentation.

Answer 2

Ich würde mit der Ereignis Delegation vorschlagen, etwa so:

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

Anstatt einen Zuhörer zu jedem Hinzufügen und jeder input, du bist nur das Hinzufügen ein-#grid.

Per dieser großen Antwort: What is DOM event delegation?

Ein weiterer Vorteil der Veranstaltung Delegation ist, dass der Gesamtspeicherbedarf von Ereignis-Listener verwendet geht (da die Anzahl der Ereignisbindungen nach unten gehen). Bei kleinen Seiten, die oft entladen werden, kann es keinen großen Unterschied machen (d. H. Benutzer navigieren oft zu verschiedenen Seiten). Aber für langlebige Anwendungen kann es von Bedeutung sein.

Es gibt einige wirklich schwierig zu verzeichnende Situationen, wenn aus dem DOM entfernte Elemente immer noch Speicher beanspruchen (d. H. Sie lecken), und oft ist dieser ausgelaufene Speicher an eine Ereignisbindung gebunden. Mit der Ereignisdelegierung können Sie untergeordnete Elemente zerstören, ohne zu riskieren, ihre Ereignis-Listener zu "lösen" (da sich der Listener auf dem Vorfahren befindet). Diese Arten von Speicherlecks können dann enthalten sein (wenn nicht beseitigt, was manchmal verdammt schwierig ist. IE Ich sehe dich an).