javascript - 原型(prototype)添加事件监听器

Question

出于某种原因，当我尝试将 actionlisetner 分配给列表元素时，该值不固定。这就是我的意思:

Event.observe(window, 'load', function() {
    for(i = 1; i <= $$('ul#review_list li').length; i++) {
        $('cover_' + i).observe('click', function(event) {
            alert(i);
        }); 
    }

});

#review_list 中有 7 个列表元素，出于某种原因，每当单击任何 li 元素时，我都会收到一个警报，每个元素被单击时的值为 8。我希望每个人都提醒其各自的 i 值。我在这里做错了什么？

谢谢!

Answer 1

试试这个:

Event.observe(window, 'load', function() {
    for(i = 1; i <= $$('ul#review_list li').length; i++) {

        (function (i) { // i is passed as an argument below

            $('cover_' + i).observe('click', function(event) {
                alert(i); // creates a closure around the argument i
            });

        })(i); // pass i as an argument

    }
});

第一种方法不行的原因是因为alert(i);在循环变量 i 周围创建一个闭包，它会随着每个事件分配而递增。在第一个事件被触发时，i 的值是 8，这对所有事件都是通用的，这就是为什么无论你点击哪里都会得到 8。

在第二种方法中，我发布的那个，alert(i) 创建了一个围绕参数 i 的闭包，它不会与任何其他事件监听器共享.

无论如何，你应该阅读this article on JavaScript closures以便更好地理解它们。