循环中的 addEventHandler() 有意外结果答案

【问题标题】：addEventHandler() in a loop has unexpected results循环中的 addEventHandler() 有意外结果
【发布时间】：2011-06-11 19:02:52
【问题描述】：

我不确定要查找什么，因此我找不到任何关于此主题的先前问题，Google 也没有提供太多帮助。

(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 供您在...行动中看到它。

我假设我搞砸了一些相对简单的事情，我就是不知道是什么。

【问题讨论】：

呃，slides[] 是我之前尝试解决相同问题的遗留问题，您可以忽略它。

标签： javascript javascript-events

【解决方案1】：

即使您在块中声明变量，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) {

        }
    }

})();

【讨论】：

我认为您的代码中存在错误，但感谢您的回复。文字部分帮了大忙！
大概是……我没仔细看
那里，我编辑了它，但显然必须有人在它通过之前对其进行审查。

【解决方案2】：

这个bug我之前遇到过，和slide的绑定有关，很难解释。这是一个修复。

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

【讨论】：