Auf und ab: Eine fehlende Funktion bei der Front-End-Ereignisausbreitung?

JavaScript und das DOM verwenden die Event-API, damit Elemente ihre Vorfahren über Ereignisse informieren können. Dies funktioniert gut, da jedes Element immer nur genau ein übergeordnetes Element hat (bis zum Dokumentstamm), sodass der Pfad, den ein Ereignis nimmt, linear und relativ kurz im Verhältnis zur Größe des Dokuments ist.

Aber es gibt keinen analogen Mechanismus, um Ereignisse nach unten durch das DOM zu verbreiten:

Als einfaches Beispiel kann man sich ein Szenario wie dieses vorstellen:

<product-search>
   <search-box></search-box>
   <product-card></product-card>
</product-search>

Die API des Suchfeldelements lässt sich einfach mit generischen DOM-APIs erstellen: Immer wenn es intern festlegt, dass die Eingabe eines Benutzers eine Suche starten soll, gibt es ein Ereignis aus, vermutlich so etwas wie „framework:search“.

Die Produktsuche kann dann einfach selbst auf dieses Ereignis warten und wird automatisch sehr widerstandsfähig gegenüber Verschachtelungen und anderen seltsamen HTML-Spielereien; Benutzer können sogar verschiedene Suchkomponenten verwenden, wenn sie an diesem Tag besonders kreativ sind.

Sobald die Produktsuchkomponente das Suchereignis empfangen hat, muss sie die Statusänderung zurück an die Produktkarte weitergeben. Dies ist mit einem generischen Mechanismus überraschend schwierig zu bewerkstelligen.

Das Problem hierbei ist, dass a) sich die Produktsuche möglicherweise nicht nur auf untergeordnete Produktkarten beschränken möchte, sondern mit jedem Element arbeiten möchte, das einer generischen API entspricht, b) das Element, das die Benachrichtigung benötigt, möglicherweise tief darin verschachtelt ist die Produktsuche, und c) die Komponente könnte eine große Anzahl von untergeordneten Elementen haben, was einen Shotgun-Ansatz aus Leistungssicht riskant macht.

Soweit mir bekannt ist, gibt es in der DOM-API keine Funktion, die dieses Problem vollständig löst. Mache ich es hier einfach zu kompliziert? Gibt es einen einfachen Weg, das zu umgehen?

Meine beste Idee hier ist ein Kompromiss, der a) und b) durch die Verwendung von querySelectorAll("*") erreicht und wahllos ein nicht sprudelndes Ereignis für jedes untergeordnete Element auslöst.

Was haltet ihr davon?

Das obige ist der detaillierte Inhalt vonAuf und ab: Eine fehlende Funktion bei der Front-End-Ereignisausbreitung?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!