JavaScript 闭包应用之循环事件绑定的 N 种解决办法

2023-12-08 23:40:50

JavaScript 中的闭包是一种非常强大的工具，它可以让你访问函数内部的变量，即使函数已经执行完毕。这使得闭包非常适合用于循环事件绑定，因为你可以使用闭包来存储循环的当前索引。

然而，大量使用闭包也会导致一些问题。首先，它会导致栈内存太大，页面渲染变慢，性能受到影响。其次，闭包会使代码难以理解和维护。

因此，在真实项目中需要合理应用闭包。基于闭包的机制，每一轮循环时都会产生一个闭包，存储对应的索引。点击事件触发，执行对应的函数，让其上级上下文是闭包即可。

自定义属性的性能要比闭包好。

方法一：使用闭包

// 使用闭包实现循环事件绑定
function addEventListeners(elements) {
  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', function() {
      console.log(i);
    });
  }
}

// 使用方法一
const elements = document.querySelectorAll('.element');
addEventListeners(elements);

方法二：使用自定义属性

// 使用自定义属性实现循环事件绑定
function addEventListeners(elements) {
  for (let i = 0; i < elements.length; i++) {
    elements[i].setAttribute('data-index', i);
    elements[i].addEventListener('click', function() {
      const index = this.getAttribute('data-index');
      console.log(index);
    });
  }
}

// 使用方法二
const elements = document.querySelectorAll('.element');
addEventListeners(elements);

方法三：使用委托

// 使用委托实现循环事件绑定
const container = document.querySelector('.container');

container.addEventListener('click', function(event) {
  const element = event.target;
  if (element.classList.contains('element')) {
    const index = element.getAttribute('data-index');
    console.log(index);
  }
});

// 使用方法三
const elements = document.querySelectorAll('.element');
for (let i = 0; i < elements.length; i++) {
  elements[i].setAttribute('data-index', i);
}

比较

方法	优点	缺点
闭包	简单易用	性能较差，难以理解和维护
自定义属性	性能较好	代码稍显复杂
委托	性能最好，代码最简洁	需要额外的事件处理逻辑