javascript - 使用文档级事件监听器而不是单独的事件监听器

Question

想象一下以下用例:

一个页面包含许多按钮，每个按钮触发不同的功能。我看到的示例向每个按钮添加了事件监听器。

但是，如果我向整个文档添加一个事件监听器，然后从该点提取给定元素，那么我会知道点击了什么，并相应地调用一个函数，会发生什么情况。

在那种情况下只有一个事件监听器，并且没有按钮的数量那么多。

这种方法会提高性能吗？

Answer 1

您所描述的是 JavaScript 事件与 DOM 交互方式的一个特性，称为 event delegation .

基本上，通过向父元素添加监听器，它可以捕获和处理来自其子元素的事件，这些子元素在被激活时会“冒泡”。

与向每个子元素添加事件监听器的替代方法相比，此方法占用的资源更少。