Javascript 使用事件委托克服纯JS中的性能瓶颈

我现在是一名服务器端开发人员，正在学习纯JS的诀窍。这个问题是关于通过纯JS理解客户端缓存的

想象一下，一个网页列出了来自用户的各种推文，每条推文都有一个“回复”按钮。按该键将呈现一个文本框

如果该文本框已经呈现，则按“响应此”按钮仅将其关闭。负责创建此效果的JS函数称为

toggle\u reply

每次加载页面时，我都会将切换功能分配给每个“响应此”按钮，如下所示：

Array.from(document.querySelectorAll('button.reply')).forEach(btn => btn.onclick = toggle_reply)

每次页面刷新时都会调用此函数。每次新推文出现时，页面都会刷新——将新推文添加到列表中，如果列表大于40，则删除旧推文

---

我的问题是关于改进这种方法。每次有新的循环时，我都在运行这个for循环，这让我感觉太过份了。是否有一种方法可以缓存页面上的按钮，这些按钮已经被for循环处理过？这是一个很好的示例，说明了如何执行此操作。

这是一个很好的示例，说明了事件委派何时有用。不要挂上每个按钮；相反，只需在它们所在的容器上钩住

点击
，然后当点击气泡进入容器时，检查气泡是否通过其中一个按钮：


document.getElementById（“容器”）.addEventListener（“单击”），函数（e）{
//查看单击是否通过了`button.reply`
var btn=e.target.closest（“按钮回复”）；
如果（btn）{
//这是一个回复按钮
log（“回复tweet”）；
}
});
//即使我们添加了一条新的tweet，它也能正常工作
document.getElementById（“容器”）.insertAdjacentHTML（“beforeend”，
`
四
回复
`
);

一个
回复
两个
回复
三
回复
你应该研究AJAX，在AJAX中，人们不刷新整个页面，只是来回传递消息。@LGSon：是的，我也在研究xhr对象。旁注：在现代浏览器中，
querySelectorAll
返回的节点列表有自己的
forEach
（不需要
数组。from
），对于较旧的浏览器，很容易进行多边形填充；演示了如何使用。我假设您使用XHR刷新推文，因此当您开始这样做时，下面的答案将继续有效。：-）@T.J.克劳德：是的，我看得出这就是它的美。这将是理解事件委派的一个很好的练习。只是想知道，与其使用我必须填充的
元素#最近的
，还有什么方法可以便宜地检查
e.target的
类列表以获得
回复
类？（虽然我假设你选择了
元素#最近的
，因为这样更容易？。@HassanBaig:Polyfilling
最近的
是你最好的选择；请参阅上面的MDN链接，以了解您可以使用的polyfill。请注意，您并不是只想检查
e.target
的类列表；您要检查类的
e.target
，如果它没有，请检查它的父级，然后检查它的父级，直到您连接事件的元素，因为按钮可以包含其他元素（
单击我
）。