遇到的问题（JS循环绑定事件）

问题描述:想通过循环的方式给HTML元素绑定事件，结果失败---总是会只能绑定到最后一个元素。

HTML

<div id="bnts">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

JS

var bnts = document.getElementById("bnts").getElementsByTagName("span");
for(var i = 0; i<bnts.length; i++) {
    bnts[i].onclick = function() {
        alert(i);
    }
}

原因

 

 

解决办法