首页 > web前端 > js教程 > 正文

再次上下:前端事件传播中缺少的功能?

Susan Sarandon
发布: 2024-10-06 16:34:30
原创
881 人浏览过

Up and down again: A missing feature in front end event propagation?

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

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板