为什么我应该使用事件委托而不是queryselectorAll

时间:2019-05-08 18:28:43

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

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

1 个答案:

答案 0 :(得分:2)

一些好处:

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

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

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

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

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