将多个 addEventListener 添加到特定功能答案

【问题标题】：Adding multi addEventListener to specific function将多个 addEventListener 添加到特定功能
【发布时间】：2011-12-01 19:10:08
【问题描述】：

我想对特定功能做多个AddEventListener，但结果不是我想要的。我总是得到名单上的最后一个孩子。

为什么？

这是代码：

第一部分：

<script>  
    var inside_elm= new Array();
    inside_elm[1]="inside_e1";
    inside_elm[2]="inside_e2";
    inside_elm[3]="inside_e3";
    
    var kk = {      
        showBox :function(elm){
            alert(elm);
            document.getElementById(elm).style.display='block';
        }
    }
    
    function load() {
        var e_elm= new Array();
        e_elm[1]="e1";
        e_elm[2]="e2";
        e_elm[3]="e3";
    
        for(var i=1;i<3;i++){
            var k=e_elm[i];
            alert(inside_elm[i]);
    
            document.getElementById(e_elm[i]).addEventListener('click',function(){kk.showBox(inside_elm[i])},false);
        }
    }
    </script>

身体：

  <body onload="load();">
    <div id="e1">
        e1
        <div id="inside_e1" style="display:none;">inside_e1</div>
    </div>
    
    <div id="e2">
        e2
        <div id="inside_e2" style="display:none;">inside_e2</div>
    </div>
    <div id="e3">
        e3
        <div id="inside_e3" style="display:none;">inside_e3</div>
    </div>

【问题讨论】：

您似乎缺少<div id="e2"> 的结束 div 标签。编辑：有人修复了它（也许是你），但要确保这对问题没有影响。

标签： javascript jquery events dom-events addeventlistener

【解决方案1】：

这基本上是因为它在函数执行之前不会评估“i”，到哪个阶段它被设置为 3。

你想要做的是使用类似下面的东西：

for(var i=1;i<4;i++){
    var k=e_elm[i];
    alert(inside_elm[i]);

    var elm = document.getElementById(e_elm[i]);
    elm.inside_elm = inside_elm[i];
    elm.addEventListener('click', function(){kk.showBox(this.inside_elm)},false);
}

【讨论】：

谢谢，这个修复工作很好，但是当我添加了多个元素并且我增加了一个计数器时，最后一个 div 打开了多个 div 为什么？这个 for 的逻辑是如何工作的？
我发现了问题！！！我在 div 上缺少封闭标签，你的脚本工作得很好。谢谢

【解决方案2】：

我认为这归结为以下几点，或者至少它无济于事。

for(i = 1;i < 3;i++){
....
}

只会访问数组的前两个原子，并在第三次迭代之前退出循环。试试

for(i = 1;i < 4;i++){
....
}

同样，在这种情况下，最好从 0 开始数组索引

for(i = 0;i<3;i++){
....
}

将遍历每个（假设起始索引为 0）

【讨论】：

作为扩展，它可能值得使用。 .length 而不是静态值。
这不是答案，有人可以帮我解决我的问题吗？
我检查了你的想法并且它有效，但这不是完整的答案，最好的答案在上面