Direkte vs. delegierte Ereignisbehandlung in jQuery: Welchen „.on()'-Ansatz sollten Sie wählen?

Delegieren der Ereignisbehandlung in jQuery: Direkt vs. Delegiertes .on()

Die jQuery-Methode .on() ermöglicht die Registrierung von Ereignishandlern auf DOM-Elementen. Zwei unterschiedliche Ansätze zur Ereignisbehandlung sind die direkte und die delegierte Bindung. Die direkte Bindung hängt Ereignishandler direkt an bestimmte Elemente an, während die delegierte Bindung die Ereignisbehandlung für Elemente ermöglicht, die einem Selektor innerhalb eines übergeordneten Elements entsprechen.

Im letzten Satz des angegebenen Absatzes zu delegierten Ereignishandlern heißt es, dass jQuery „ausgeführt“ wird der Handler für alle Elemente ... passend zum Selektor. Dies bezieht sich auf den Event-Bubbling-Mechanismus in DOM.

Wenn ein delegierter Event-Handler mithilfe von .on() mit einem Selektor an ein übergeordnetes Element angehängt wird, werden Ereignisse nicht nur für die ausgewählten Elemente, sondern auch für deren Nachkommen verarbeitet die zum Selektor passen. Während das Ereignis im DOM-Baum nach oben sprudelt, prüft jQuery, ob Elemente entlang des Pfads mit dem Selektor übereinstimmen, und löst den Handler aus, wenn eine Übereinstimmung gefunden wird.

Um den Unterschied zu veranschaulichen, betrachten Sie die folgenden Beispiele:

$("div#target span.green").on("click", function() {
  alert($(this).attr("class") + " is clicked");
});

Dies bindet den Click-Handler direkt an alle Elemente mit der grünen Klasse innerhalb des #target-Div. Jedes dieser Elemente verarbeitet unabhängig Klickereignisse.

Im Gegensatz dazu wird im Folgenden eine delegierte Bindung verwendet:

$("div#target").on("click", "span.green", function() {
  alert($(this).attr("class") + " is clicked");
});

Hier ist der Klickereignishandler an das #target-Div angehängt, aber das Selektor „Ereignis sprudelt“ auf Elemente, die mit „grün“ übereinstimmen. Dies bedeutet, dass alle zukünftigen Elemente mit der „grünen“ Klasse, die innerhalb des #target-Divs erstellt werden, lösen ebenfalls den Click-Handler aus.

Delegierte Bindung ist besonders nützlich, wenn Elemente dynamisch zur Seite hinzugefügt und daraus entfernt werden, da sie sicherstellt, dass neue Elemente das Ereignis erben Handhabungsverhalten, ohne dass eine manuelle Bindung erforderlich ist.

Das obige ist der detaillierte Inhalt vonDirekte vs. delegierte Ereignisbehandlung in jQuery: Welchen „.on()'-Ansatz sollten Sie wählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!