使用文档级事件侦听器而不是单独的事件侦听器

Using a document level event listener instead of separated ones

本文关键字：事件侦听器单独文档更新时间：2023-09-26

想象一下以下用例：

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

但是，如果我将事件侦听器添加到整个文档，然后从该点中提取给定的元素，以便我知道单击了什么，并相应地调用函数，会发生什么。

在这种情况下，只有一个事件侦听器，而不是按钮的数量。

此方法会提高性能吗？

你所描述的是JavaScript事件与DOM交互方式的一个功能，称为event delegation。

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

与将事件侦听器添加到每个子元素的替代方法相比，此方法的资源密集程度较低。