javascript - 为什么我应该使用事件委托而不是 queryselectorAll
问题描述
我正在学习 JavaScript 并跨过事件冒泡和事件委托。我知道什么是事件冒泡(从一个孩子直到窗口对象),但我看到每个人都说事件委托是相反的,他们做了一些 If 语句将事件目标与他们想要访问的元素相匹配。现在我想知道......
为什么不对多个元素使用“querySelectorAll”?
为什么被认为与事件冒泡相反?
解决方案
几个好处:
如果您有 1000 个按钮,最好在祖先元素上添加一个单击处理程序以侦听对后代按钮的单击,而不是遍历所有 1000 个按钮并为每个按钮附加一个处理程序。仅通过 1000 个元素的迭代就是一个性能问题,如果更多则更糟。更不用说 1000 个按钮引用处理程序所涉及的内存使用情况。
您可以侦听可能尚不存在或尚不存在的元素上的事件。您可以提前为可能不存在的后代按钮附加点击处理程序。这通常在通过 AJAX 加载正在收听的内容时使用。
您可以跨 DOM 更改持久化处理程序。通常与动态内容一起使用。例如,您可以为待办事项列表项的删除按钮设置一次单击处理程序。每次附加/重新附加/分离待办事项列表项时,您不必清理其处理程序。您可以不理会委派的人。
委托,就是委托,委托给他人。在这种情况下,它将把事件处理程序从一个元素交给它的祖先的责任。为了使它起作用,它必须使用冒泡。
冒泡只是故事的一半。冒泡的反面是捕获。
推荐阅读
- java - 我的自定义抽屉导航工具栏中的错误是什么?
- kubernetes - Kubernetes pod 上与 Azure 文件共享的文件夹不起作用
- python - Python 请求发布 - 超过 HTTPSConnectionPool 最大重试次数
- angular - Angular 中的 HTTP 获取请求
- sql - 使用分区计算当前作业
- php - Laravel 包开发 - 目标类 [ControllerName] 不存在
- django - pymemcached 和 Django 3.2 的权限错误
- python - Python:“../DATA/file.csv”不再适用于文件打开
- python - 在 for 循环中创建函数来控制 ToggleButton,后期绑定问题(ipywidgets JupyterLab)
- javascript - JQuery Datatable Refresh - 无法在 MVC 控制器端接收参数值