De haut en bas encore : une fonctionnalité manquante dans la propagation des événements front-end ?

JavaScript et le DOM utilisent l'API Event pour permettre aux éléments d'informer leurs ancêtres des événements qui se produisent. Cela fonctionne bien car chaque élément n'a qu'exactement un parent (jusqu'à la racine du document), donc le chemin emprunté par un événement est linéaire et raisonnablement court par rapport à la taille du document.

Mais il n'existe pas de mécanisme analogique pour propager les événements vers le bas à travers le DOM :

Pour un exemple simple, on peut imaginer un scénario comme celui-ci :

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

L'API de l'élément search-box est facile à construire avec des API DOM génériques : chaque fois qu'elle détermine en interne que la saisie d'un utilisateur doit lancer une recherche, elle émet un événement quelconque, probablement quelque chose comme framework:search.

La recherche de produits peut alors simplement écouter ledit événement sur elle-même et devient automatiquement très résiliente à l'imbrication et à d'autres manigances HTML étranges ; les utilisateurs peuvent même utiliser différents composants de recherche s'ils se sentent très créatifs ce jour-là.

Une fois que le composant de recherche de produit a reçu l'événement de recherche, il doit propager le changement d'état jusqu'à la fiche produit. C'est étonnamment difficile à faire en utilisant un mécanisme générique.

Le problème ici est que a) la recherche de produits ne veut peut-être pas se limiter aux seuls enfants de la carte de produit, mais fonctionne avec n'importe quel élément conforme à une API générique, b) l'élément qui nécessite la notification peut être profondément imbriqué dans la recherche de produits, et c) le composant peut avoir un grand nombre d'enfants, ce qui rend une approche ponctuelle risquée du point de vue des performances.

Pour autant que je sache, aucune fonctionnalité dans l'API DOM ne répond pleinement à ce problème. Est-ce que je rends les choses trop compliquées ici ? Existe-t-il un moyen simple de contourner ce problème ?

Ma meilleure idée ici est un compromis qui réalise a) et b) en utilisant querySelectorAll("*") et en distribuant un événement sans bulle sur chaque élément enfant sans discernement.

Qu'en pensez-vous ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!