闭包的应用

闭包的应用

循环绑定事件

闭包的方式

var body = document.querySelector('body'),
  buttons = document.querySelectorAll('button'),
  arr = ['red', 'green', 'blue'];

// 方法1
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = (function (i) {
    return function anonymous() {
      body.style.background = arr[i];
    };
  })(i);
}

// 方法2
for (let i = 0; i < buttons.length; i++) {
  buttons[i].onclick = function () {
    body.style.background = arr[i];
  };
}

使用中间变量方式

var body = document.querySelector('body'),
  buttons = document.querySelectorAll('button'),
  arr = ['red', 'green', 'blue'];

for (var i = 0; i < buttons.length; i++) {
  var item = buttons[i];
  item.myIndex = i; // => 在循环的时候，把每一个按钮的索引赋值给当前按钮(元素对象)的myIndex自定义属性
  item.onclick = function () {
    // this => 当前点击的这个按钮
    body.style.background = arr[this.myIndex];
  };
}

使用事件委托

// 基于事件委托实现多元素的事件绑定，要比传统循环一个个的给元素进行事件绑定，性能提高40%~60%
document.body.onclick = function (ev) {
  var target = ev.target;
  if (target.tagName === "BUTTON") {
    // this -> body
    this.style.background = target.value;
  }
};