我們應該都遇到過要給很多 dom 節點綁定同一事件的問題,但是當我們遍歷的時候其中參數 i 的處理如果不小心的話就會處理的有點問題.
應用不同的場景,有下面三種解決方法 :
- 第一種,如果我們需要在遍歷的時候從dom節點中獲取需要的數據,我們就可以直接在循環體內添加時間綁定就可以了.
function bindClick1() {
var memberList = $api.byId('memberList');
var item = $api.domAll(memberList,'.item');
for (var i = 0,itemLen = item.length; i < itemLen; i++) {
$api.addEvt(item[i],'click',function () {
itemId = $api.attr(this,'id');
alert(i);
});
}
}
- 第二種,當我們不是在dom中獲取數據(通常都是..)的時候.我們就可以用閉包來處理
function bindClick3() {
var arr = [1,2,3];
var item = $api.domAll($api.byId('memberList'),'.item');
function bibao() {
return function (i) {
$api.addEvt(item[i],'click',function () {
alert(arr[i]);
});
}
}
for (var i = 0,itemLen = item.length; i < itemLen; i++) {
var func = bibao();
func(i);
}
}
利用閉包的特性來保存變量,阻止變量的提升.
可以簡單的寫成下面的形式
function bindClick2() {
var arr = [1,2,3];
var item = $api.domAll($api.byId('memberList'),'.item');
for (var i = 0,itemLen = item.length; i < itemLen; i++) {
(function (j) {
$api.addEvt(item[j],'click',function () {
alert(arr[j]);
});
})(i)
}
}
- 第三種最簡單 利用es6的關鍵詞 let .需要注意的是兼容性問題(可以用babel工具來轉換使用)
function bindClick() {
var arr = [1,2,3,4];
var item = $api.domAll($api.byId('memberList'),'.item');
for (let i = 0,itemLen = item.length; i < itemLen; i++) {
$api.addEvt(item[i],'click',function () {
alert(arr[i]);
});
}
}
