Question

所以，这就是我想知道的。我有一个类似我所附的代码段。

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

我的问题是，当我有成千上万个元素时，甚至更多。我应该只运行像这样的循环并分配函数吗，或者有没有更好或更有效的方法来使用纯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>

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

1 个答案: