Question

我正在尝试建立一个网站。我将addEventListener放入一个多次调用的函数中的更多元素：

    idImag = 0;

    function function1()
    {
        //do something
        function2()
    }

    function function2()
    {
        //do something
        document.getElementById("holder" + idImag).addEventListener('mouseover',function(){
         idImag++;
alert('It works');
    }

    function3(event)
    {
        alert(3);
    }

    function1();
    function1();

<div id="holder0">Dog</div>
<div id="holder1">Chicken</div>
<div id="holder2">Cow</div>

但是有一个问题：只有最后一个元素才能获得事件监听器......其他元素将鼠标放在它上面后什么都不做。然后我用Google搜索了一下，发现了闭包以及变量如何保留甚至在函数返回后...我不明白所有内容，但我只是想知道如何将事件监听器放在function2中。你能帮助我吗？可能你注意到了：我是新手。对不起，如果问题是愚蠢的，或者没有意义。如果你需要更多的细节，我会把我的整个代码，但它有罗马尼亚语的变量和注释，所以我不确定你是否理解它。抱歉我的英语不好，并提前感谢你。

Answer 1

为什么不进行for循环？

function function3 (event) {
    alert(3);
}

for (var idImag = 0; i< numberOfHolders; i++) {
    //do something1
    //do something2
    document.getElementById("holder" + idImag).addEventListener('mouseover',function3);
}

Answer 2

看起来你只关心图像id，它可以通过元素的id属性获得。

因此你可以这样做：

document.getElementById("holder" + idImag).addEventListener(
    'mouseover',
    function(){
        var id = this.id;
        /* Then strip off "holder" from the front of that string */
    }
);

Answer 3

这看似正确，因为它会调用document.getElementById("holder0").addEventListener(…)，然后会调用document.getElementById("holder1").addEventListener(…)。关闭不是你的问题。

您可以通过例如使用console.log记录您要添加事件监听器的元素来验证这一点（您需要安装Firebug，或者打开Chrome的开发者控制台）。

也许将代码粘贴到http://jsfiddle.net/，以便我们可以尝试一下？

Javascript：我可以避免关闭吗？

3 个答案: