关于javascript:addEventListener,for(),index。 怎么用封闭?

addEventListener, for(), index. how to use closure?

本问题已经有最佳答案,请猛点这里访问。

我有这个代码:

1
2
3
4
5
6
7
var items = this.llistat.getElementsByTagName('a');

for( var i = 0; i < items.length; i++ ){    
  items[i].addEventListener('click', function(event) {
    alert( i );
  }, items[i]);
}

在哪里监听事件,但是有3个项目,并且警告总是在任何元素上打印3(它不尊重索引),

Dosen't items[i]不应该做关闭工作吗?

谢谢!


不,addEventListener的第三个参数是useCapture。 有关更多信息,请参阅MDN。

但你可以使用:

1
2
3
4
5
6
7
for( var i = 0; i < items.length; i++ ){
    (function(i){
        items[i].addEventListener('click', function(event) {
            alert( i );
        }, false);
    })(i);
}

要么

1
2
3
4
5
6
7
var handler = function(event) {
    var i = items.indexOf(this);
    alert( i );
};
for( var i = 0; i < items.length; i++ ){
    items[i].addEventListener('click', handler, false);
}

第一个为每个元素创建一个新的事件处理程序,因此它需要更多的内存。 第二个重用同一个事件监听器,但使用indexOf,所以它更慢。


这是一个经典的闭包问题:你必须创建一个新的函数绑定,而不是'i'变量,而是绑定时的值:

1
2
3
4
5
6
7
8
9
var items = this.llistat.getElementsByTagName('a');

for( var i = 0; i < items.length; i++ ) {
        items[i].addEventListener('click', listener.bind( null, i) );
}

function listener(index) {
         alert(index);
}