js在for中的事件无法调用循环变量i的解决方法

在for循环中的事件里面会发现无法使用循环变量i。

    <div>
        <span>1</span>
    </div>
    <div>
        <span>2</span>
    </div>
    <div>
        <span>3</span>
    </div>
    <div>
        <span>4</span>
    </div>
    <div>
        <span>5</span>
    </div>

        var div = document.querySelectorAll('div');
        var span = document.querySelectorAll('span');
        for (var i = 0; i < div.length; i++) {
            div[i].addEventListener('click', function () {
                var html = span[i].innerHTML;
                console.log(html);
            })
        }

这时，我们可以给事件的对象div用setAttribute一个自定义值，然后在事件中用getAttribute进行调用来取代i。

for (var i = 0; i < div.length; i++) {
            div[i].setAttribute('index', i);
            div[i].addEventListener('click', function () {
                var index = this.getAttribute('index');
                var html = span[index].innerHTML;
                console.log(html);
            })