javascript - 为什么我应该使用事件委托(delegate)而不是 queryselectorAll

标签 javascript event-handling dom-events event-delegation

我正在学习 JavaScript,并跨越了事件冒泡和事件委托(delegate)。 我知道什么是事件冒泡(从子对象一直到窗口对象),但我看到每个人都说事件委托(delegate)是相反的,他们会执行一些 If 语句,将事件目标与他们想要访问的元素相匹配。现在我想知道...
为什么不对多个元素使用“querySelectorAll”?
为什么被认为是事件冒泡的反面?

最佳答案

一些好处:

  • 如果您有 1000 个按钮,最好在祖先元素上添加一个点击处理程序来监听后代按钮的点击,而不是遍历所有 1000 个按钮并附加一个处理程序每个。仅通过 1000 个元素的迭代就是一个性能问题,如果更多则更糟。更不用说 1000 个按钮引用处理程序所涉及的内存使用量了。

  • 您可以监听可能尚不存在或尚不存在的元素上的事件。您可以提前为可能不存在的后代按钮附加一个单击处理程序。这通常在通过 AJAX 加载正在监听的内容时使用。

  • 您可以在 DOM 更改期间保留处理程序。通常与动态内容一起使用。例如,您可以为待办事项列表项的删除按钮创建一次单击处理程序。每次附加/重新附加/分离待办事项列表项时,您不必清理其处理程序。您可以不打扰被委托(delegate)的人。

委托(delegate),就是这样,委托(delegate),to entrust to another 。在这种情况下,它将保存元素的事件处理程序的责任移交给其祖先。为了让它发挥作用,它必须使用冒泡。

冒泡只是故事的一半。冒泡的反面是capturing .

关于javascript - 为什么我应该使用事件委托(delegate)而不是 queryselectorAll,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56046974/

相关文章:

javascript - AngularJS 将 ng-bind-html 制作为动态构造的对象名称

javascript - 我可以使用 JavaScript 获取我的域中的外部页面的标题吗?

javascript - 为什么我的 'click' addEventListener 在页面加载时被调用

javascript - 选择圆弧上的区域

javascript - 如何禁用默认浏览器自动完成功能?

javascript - 获取 api 数据并将其放入表中

javascript - 如何通过迭代时间戳操作向 API 询问许多值(过去 14 天)?

javascript - stopPropagation native 事件与 JavaScript 事件

javascript - onload 函数无序触发

JavaScript、浏览器、窗口关闭 - 发送 AJAX 请求或在窗口关闭时运行脚本