再次上下：前端事件傳播缺少的功能？

JavaScript 和 DOM 使用事件 API 讓元素通知其祖先發生的事情。這種方法效果很好，因為每個元素只有一個父元素（直到文檔根），因此事件所採用的路徑是線性的，並且相對於文檔的大小相當短。

但沒有類似的機制可以透過 DOM 向下傳播事件：

舉個簡單的例子，可以想像這樣一個場景：

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

搜尋框元素的 API 很容易使用通用 DOM API 建構：每當它在內部確定使用者的輸入應該開始搜尋時，它就會發出某種類型的事件，大概類似於框架：搜尋。

然後，產品搜尋可以簡單地監聽其自身的所述事件，並自動變得對嵌套和其他奇怪的HTML 惡作劇非常有彈性；如果用戶當天感覺特別有創意，甚至可以使用不同的搜尋元件。

產品搜尋元件收到搜尋事件後，它需要將狀態變更傳播回產品卡。使用通用機制很難做到這一點。

這裡的問題是a) 產品搜尋可能不想將自己限制為僅產品卡子級，而是可以使用符合某些通用API 的任何元素，b) 需要通知的元素可能深深嵌套在其中產品搜索，c) 該組件可能有大量子組件，從性能角度來看，這種霰彈槍方法存在風險。

據我所知，DOM API 中沒有任何功能可以完全解決這個問題。我是不是把事情搞得太複雜了？有簡單的方法嗎？

我最好的想法是透過使用 querySelectorAll("*") 並在每個子元素上不加區別地分派非冒泡事件來實現 a) 和 b) 的妥協。

大家覺得怎麼樣？

以上是再次上下：前端事件傳播缺少的功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！