在大量元素上添加事件侦听器的最有效方法是什么？

Question

所以，这就是我想知道的。 我有一个像我附加的代码片段。

这段代码运行得很好，我在这里做的是使用类选择器获取所有 html 元素，并在这些元素的点击事件上绑定一个预定义的函数。

我的问题是，当我有数千个甚至更多的元素时。 我应该像这样运行一个循环并分配函数，还是有更好或更有效的方法来使用纯 JavaScript 执行此操作？

如果这是最有效的方法，没有其他方法，或者还有其他方法，一些参考或解释真的很有帮助，我在其他任何地方都没有找到相关信息。

 var elements = document.getElementsByClassName('element'); var printNumbers = function() { this.innerHTML = this.dataset.position; } for (var i = 0; i < elements.length; i++) { elements[i].addEventListener("click", printNumbers); }

 .element { height: 40px; width: 40px; display: block; float: left; background-color: #cecece; margin: 5px 0 0 5px; }

 <div class="element" data-position="1"></div> <div class="element" data-position="2"></div> <div class="element" data-position="3"></div> <div class="element" data-position="4"></div> <!-- more elements here with continious data-position attribute --> <div class="element" data-position="1000"></div>

Answer 1

将点击处理程序放在父级上，因为事件向上冒泡，您可以从父级捕获它们并在那里处理它们，更新片段：

 var printNumbers = function(event) { if (event.target.classList.contains('element')) { event.target.innerHTML = event.target.dataset.position; } } document.body.addEventListener('click', printNumbers)

 .element { height: 40px; width: 40px; display: block; float: left; background-color: #cecece; margin: 5px 0 0 5px; }

 <div class="element" data-position="1"></div> <div class="element" data-position="2"></div> <div class="element" data-position="3"></div> <div class="element" data-position="4"></div> <!-- more elements here with continious data-position attribute --> <div class="element" data-position="1000"></div>