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中文网其他相关文章!