循环中的addEventHandler(）出现意外结果

addEventHandler() in a loop has unexpected results

本文关键字：意外 结果 addEventHandler 循环      更新时间：2023-09-26

我不知道该找什么，所以我找不到以前关于这个主题的任何问题，谷歌也帮不了什么忙。

(function() {
    var element = function(str) {
        return document.getElementById(str);
        },
        parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
        len = parent.length,
        slides = slides || [];
    for (var i=0; i<len; i++) {
        var link = parent[i].getElementsByTagName('a')[0],
            slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));

        if (addEventListener) {
            link.addEventListener('click', function(event){
                event.preventDefault();
                alert(slide.getAttribute('id'));
            });
        } else if (attachEvent) {
        }
    }
})();

因此，在上面的代码中，在for循环中，我将一个事件附加到所有链接（其中五个），这些链接应该提醒它们所指向的幻灯片的ID（仅用于调试目的），但它们都显示最后一张幻灯片的ID。我还创建了一个jsFiddle，让您在…Action中看到它。

我想我把一些相对简单的事情搞砸了，我就是搞不清是什么。

javascript中的变量是函数范围，即使您在块中声明它们也是如此。这个循环在变量循环周围创建了一个闭包，但在每次迭代时都会重新分配循环。循环完成时，所有闭包都指向数组中的最后一个元素。

要解决此问题，请以不同的方式确定变量的范围：

(function() {
    var element = function(str) {
        return document.getElementById(str);
        },
        parent = document.getElementsByTagName('ul')[0].getElementsByTagName('li'),
        len = parent.length;
    for (var i=0; i<len; i++) {
        var link = parent[i].getElementsByTagName('a')[0],
            slide = element(parent[i].getElementsByTagName('a')[0].getAttribute('href').substr(1));

        if (addEventListener) {
            link.addEventListener('click', (function(slide){
                return function(event) {
                    event.preventDefault();
                    alert(slide.getAttribute('id'))
                }
            })(slide));
        } else if (attachEvent) {
        }
    }
})();

我以前遇到过这个错误，它与slide的绑定有关，很难解释。这里有一个解决方案。

link.addEventListener('click',
    (function(x) {
       return function(event){
                event.preventDefault();
                alert(x.getAttribute('id'));
              }
     })(slide));
相关文章：