循环绑定事件的闭包写法

如果要对如下多个元素进行事件的循环绑定的时候

var btns = document.querySelectorAll('.btn'); // 6 elements
var output = document.querySelector('#output');
var events = [1, 2, 3, 4, 5, 6];

使用闭包的写法有下面几种方式:


第一种:

  for (var i = 0; i < btns.length; i++) {
 	 	btns[i].onclick = (function(event) {
  			return function(evt) {
  			output.innerText += 'Clicked ' + event;
  		};
  })(events[i]);

第二种:

  for (var i = 0; i < btns.length; i++) {
		btns[i].onclick = (function(index) {
			return function(evt) {
 		 	output.innerText += 'Clicked ' + events[index];										
		 };
	})(i);

错误的写法:

for (var i = 0; i < btns.length; i++) {
	btns[i].onclick = function(evt) {
		output.innerText += 'Clicked ' + events[i];
 	};
}