繰り返します: フロントエンドのイベント伝播に欠けている機能はありますか?

JavaScript と DOM は Event API を使用して、要素に発生したことを先祖に通知させます。これは、各要素が厳密に 1 つの親 (ドキュメント ルートまで) しか持たないため、うまく機能します。そのため、イベントがたどるパスは直線的であり、ドキュメントのサイズに比べて適度に短いためです。

しかし、DOM を介してイベントを下方に伝播するアナログ メカニズムはありません。

簡単な例として、次のようなシナリオを想像できます。

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

検索ボックス要素の API は、汎用 DOM API を使用して簡単に構築できます。ユーザーの入力によって検索を開始する必要があると内部で判断されるたびに、何らかのイベント (おそらく Framework:search など) が発行されます。

製品検索は、それ自体で上記のイベントをリッスンするだけで、ネストやその他の奇妙な HTML の悪ふざけに対して自動的に非常に回復力が高くなります。ユーザーは、その日にクリエイティブな気分になったときには、別の検索コンポーネントを使用することもできます。

製品検索コンポーネントが検索イベントを受信したら、状態の変更を製品カードに伝播する必要があります。これを一般的なメカニズムを使用して行うのは驚くほど困難です。

ここでの問題は、a) product-search は、自身を product-card の子のみに限定せず、汎用 API に準拠する任意の要素を操作する可能性があること、b) 通知を必要とする要素が内部に深くネストされている可能性があることです。 c) コンポーネントには多数の子が含まれる可能性があり、パフォーマンスの観点からショットガン アプローチは危険になります。

私の知る限り、DOM API にはこれに完全に対処する機能はありません。ここで物事を複雑にしすぎているだけですか？それを回避する簡単な方法はありますか?

ここでの私の最良のアイデアは、querySelectorAll("*") を使用し、すべての子要素に非バブリング イベントを無差別にディスパッチすることで、a) と b) を達成する妥協案です。

皆さんはどう思いますか?

以上が繰り返します: フロントエンドのイベント伝播に欠けている機能はありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。