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

Direkte vs. delegierte Ereignisbehandlung in jQuery .on()

Die .on()-Methode von jQuery bietet zwei unterschiedliche Ansätze zur Ereignisbehandlung: direkt und delegiert. Der Unterschied liegt im Umfang der Ereignisbehandlung.

Direkte Ereignisbehandlung

Bei der direkten Ereignisbehandlung ist der Ereignishandler direkt an das Zielelement gebunden. Dies bedeutet, dass der Handler nur ausgeführt wird, wenn das Ereignis direkt auf diesem Element auftritt, nicht auf einem seiner Nachkommen. Zum Beispiel:

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

Delegierte Ereignisbehandlung

Bei der delegierten Ereignisbehandlung ist der Ereignishandler an ein Vorfahrenelement gebunden, und der Selektor gibt die untergeordneten Elemente an sollte den Handler auslösen. Dadurch kann der Handler Ereignisse verarbeiten, die an einer beliebigen Stelle innerhalb des angegebenen Bereichs auftreten. Zum Beispiel:

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

Der Hauptunterschied besteht darin, dass im Fall 1 jeder Span direkt für die Verarbeitung seiner eigenen Ereignisse verantwortlich ist. Im Fall 2 wird dem Containerelement (div#target) die Verantwortung für die Verarbeitung von Ereignissen für seine untergeordneten Elemente (span.green) übertragen.

Beispielvergleich

Die Das bereitgestellte Beispiel veranschaulicht die Unterschiede zwischen direkter und delegierter Ereignisbehandlung im Zusammenhang mit dem Klicken auf grüne Bereiche innerhalb eines div#target. Beide Methoden erzielen das gleiche Verhalten bei der Benachrichtigung der Klasse des angeklickten Spans.

Direkter Ansatz:

• Jeder grüne Span ist an seinen eigenen Klick-Ereignishandler gebunden.
• Neue grüne Bereiche, die in div#target erstellt werden, werden nicht an den Event-Handler gebunden sein sie.

Delegierter Ansatz:

• Der Ereignishandler ist an div#target gebunden, mit span.green als delegiertem Selektor.
• Klicks auf bestehende oder zukünftige grüne Bereiche innerhalb von div#target werden angezeigt behandelt.
• Das div#target ist für die Verarbeitung von Ereignissen im Namen aller seiner untergeordneten Elemente verantwortlich, die mit span.green übereinstimmen.

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