【问题标题】:Why should I use event delegation instead of queryselectorAll [duplicate]为什么我应该使用事件委托而不是 queryselectorAll [重复]
【发布时间】:2019-09-26 13:19:35
【问题描述】:

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

【问题讨论】:

  • 如果你有 100 个带有 onclick 处理程序的按钮,通常将它们放在一个容器中会更简单,将 onclick 分配给这个容器并使用 event.target 找出哪个按钮被点击了。这就是“事件委托”的作用。
  • 每个人都说事件委托是 [事件冒泡] 的对立面” - 这是完全错误的。你在哪里读到/听到的?

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


【解决方案1】:

一些好处:

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

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

  • 您可以跨 DOM 更改保留处理程序。通常与动态内容一起使用。例如,您可以为待办事项列表项的删除按钮单击一次处理程序。每次附加/重新附加/分离待办事项列表项时,您不必清理其处理程序。您可以不理会委派的人。

委托,就是委托to entrust to another。在这种情况下,它将把事件处理程序从一个元素交给它的祖先的责任。要让它工作,它必须使用冒泡。

冒泡只是故事的一半。冒泡的反义词是capturing

【讨论】:

    猜你喜欢
    • 2014-04-06
    • 1970-01-01
    • 2012-12-06
    • 2016-05-23
    • 1970-01-01
    • 2012-10-08
    • 2015-08-13
    • 2021-09-13
    • 1970-01-01
    相关资源
    最近更新 更多