Javascript Array addEventListener

Question

带状态形状按钮的交互式地图,每个按钮都有状态缩写作为id,当点击按钮/状态时,我想激活函数"stateSelect"并发送状态缩写,以便我知道按下了什么.以下为什么不工作？

    var stateList = new Array("AK","AL","AR","AS","AZ","CA","CO","CT","DC","DE","FL","GA","GU","HI","IA","ID",
    "IL","IN","KS","KY","LA","MA","MD","ME","MH","MI","MN","MO","MS","MT","NC","ND","NE","NH","NJ","NM","NV","NY",
    "OH","OK","OR","PA","PR","PW","RI","SC","SD","TN","TX","UT","VA","VI","VT","WA","WI","WV","WY");

    for (var i = 0; i < stateList.length; i++) {
        document.getElementById(stateList[i]).addEventListener('mousedown', function() {stateSelect(stateList[i])}, false);
    }

我显然想避免50行代码,但我不确定为什么这个简单的循环不起作用.

Answer 1

因为当处理程序运行时,它会查找值i,即循环结束后的任何位置.

您需要i在函数中调整变量的范围:

function listenerForI( i ) {
    document.getElementById(stateList[i]).addEventListener('mousedown', function() {stateSelect(stateList[i])}, false);
}
for (var i = 0; i < stateList.length; i++) {
    listenerForI( i );
}

现在,i处理程序引用将是listenerForI被调用函数的参数.因此,i它将引用从for循环传入的值.