Dom 绑定事件变量存储

转载自：

公众微信号:bianchengderen

QQ群:186659233

for (var i = 0; i < 5; i++) {

var btn = document.createElement('button');

btn.appendChild(document.createTextNode('按钮' + i));

btn.addEventListener('click', function(){ console.log(i); });

document.body.appendChild(btn);

}

1. 当点击按钮4的时候,面板中会打印什么? 为什么?

2. 如何实现我们想要的结果?

a) 这道题,按钮4点击的时候,打印面板会输出5. 因为在for循环之后,i已经最终的结果是5,而当按钮点击的时候 for循环已经完成.所以每一个按钮都将输出 5.

b) 如果要实现没点击一个按钮,输出他们相应的数字.其实有几种办法.我们来看第一种;

for(var i = 0; i < 5; i++){

var btn = document.createElement('button');

btn.appendChild(document.createTextNode("按钮" + i));

(function(x){

btn.addEventListener('click',function(){console.log(x);})

})(i);

document.body.appendChild(btn);

}

这一种办法是为每一个创建了一个新的匿名函数来处理按钮事件.

又或者是

for (var i = 0; i < 5; i++) {

var btn = document.createElement('button');

btn.appendChild(document.createTextNode('按钮' + i));

btn.addEventListener('click', (function(i) {

return function() { console.log(i); };

})(i));

document.body.appendChild(btn);

}

这一种办法,我们是使用闭包函数来分配一个独立的存储空间,将i传递到每一个独立的空间.这时候,每一个按钮的点击事件,所对应的数字就不会改变了.最终结果就是我们预期的.

第三种办法就是使用foreach代替for.

['a', 'b', 'c', 'd', 'e'].forEach(function (value, i) {

var btn = document.createElement('button');

btn.appendChild(document.createTextNode('按钮' + i));

btn.addEventListener('click', function() { console.log(i); });

document.body.appendChild(btn);

});