Ich habe ein Div mit einer großen Anzahl von Child Divs (ca. 4k-5k!). Jedes Kind hat ein Ereignis 'mousedown' und 'mouseup' daran angehängt.jQuery-Ereignis-Performance: Bindet ein einzelnes Ereignis bei übergeordneten oder individuellen Ereignissen auf jedem Kind?
Sollte ich stattdessen diese Ereignisse einmal an die Eltern anhängen und das Kind mit $(e.target) auswählen? Würde es einen Leistungsvorteil geben, und wenn ja, warum?
Danke!
Ich würde mir vorstellen, dass mit jquery.on() wäre ideal.
$("#divWithHugeAmountsOfChildDiv").on("mousedown",
".childCLASSEStoMouseDown",
function()
{
alert("Booya!");
});
Wo Ihre html aussehen könnte:
<body>
<!-- lots of other elements -->
<div id="divWithHugeAmountsOfChildDiv">
<!-- lots of different type of elements -->
<div class="childCLASSEStoMouseDown">Booya?</div>
<!-- lots of different type of elements -->
</div>
<!-- lots of other elements -->
</body>
die jQuery-Selektoren ändern je nach Bedarf ...
Der Grund sehr gut in der jQuery-Dokumentation für die On Verfahren erläutert wird.
Mit so vielen untergeordneten divs sollten Sie definitiv delegierte Ereignisbehandlung mit jQuery .on() verwenden. Dies gibt Ihnen einen Ereignishandler auf dem Eltern statt 4000 Ereignishandler auf den Kindern. Es wird auch viel schneller zu installieren und zu initialisieren sein.
Wenn Sie das delegierte Formular .on() verwenden, müssen Sie e.target nicht selbst überprüfen, da jQuery das für Sie erledigt.
Die Syntax für .on() auf diese Weise verwendet, ist wie folgt:
$('parentSelector').on('mousedown', 'child selector', function(e) {
// code here
// "this" will be the object that initiated the event
});
Mehr Informationen im jQuery doc for .on().
die Verwendung von jQuery .on() macht das schon für Sie. Es bindet einen Event-Handler an einen bestimmten Elternteil und erkennt Kind-Events. Es hat Leistungsvorteile über .live() und .bind() sowie direktes Ereignis binden wie .click() und so weiter, weil:
im Gegensatz zu .live(), die das Ereignis an die document bindet, mit, .on(), Sie sind verantwortlich für welche Eltern anbinden.
.live() ist an document gebunden, die die Wurzel des Dokuments ist. Ereignisse, die aufsteigen, werden weiter gehen. Mit .on() können Sie das nächstgelegene gemeinsame Elternelement finden, um dieses Ereignis zu binden. die Blase weniger reisen - ein Leistungsvorteil
mit .on(), Sie nur einen Handler an die Mutter binden, im Gegensatz zu .bind() und direkten Ereignisbindungen, die Ereignisse auf einer Pro-Element-Basis binden - nicht gut für viele Elemente.
.on() ist leichter zu merken.
Wenn Sie das Ziel erhalten, innerhalb .on(), ist das "Dies" immer das Zielelement. Sorgen Sie sich nie um browserübergreifende, gleichmäßige Ziele. jQuery macht das für dich.
so "this" in diesem Code:
$(element).on('click','someElement',function(){
//the value of "this" in here is the DOM element target of the event
});
Danke, bin ich schon jQuery.on mit(), aber hätte nicht gedacht, es mit delegierten Veranstaltung wie diese Behandlung zu verwenden! – Adam