Question

无法获取以下代码。调用swapLevel（）直接工作正常，但addEventListener（）似乎没有做任何事情？

JavaScript的：

<script>
function load() {
    var arr = document.getElementById('menu').getElementsByClassName('level');

    for (var i=0; i<arr.length; i++) {
        arr[i].addEventListener('click', function(){swapLevel(i);}, false);
    }
    // automatically open the first level
    swapLevel(0);
}
document.addEventListener('DOMContentLoaded', load, false);
</script>

HTML：

<div id="menu"> 
<a href="#" class="level">Level One</a> 
<span class="hidden" id="0">
<p>Some options here</p> 
</span> 
<a href="#" class="level">Level Two</a> 
<span class="hidden" id="1">
<p>More options</p> 
</span> 
<a href="#" class="level">Level Three</a> 
<span class="hidden" id="2">
<p>Even more options</p> 
</span> 
</div>

Answer 1

每个处理程序都需要引用一个单独的值来传递给swapLevel。要为此目的使用变量作用域，您需要调用一个函数，并在该函数内构建处理程序。

function makeHandler(i) {
    return function(){swapLevel(i);}
}

for (var i=0; i<arr.length; i++) {
    arr[i].addEventListener('click', makeHandler(i), false);
}

另一种解决方案是简单地将属性直接放在元素上。

for (var i=0; i<arr.length; i++) {
    arr[i].__i__ = i
    arr[i].addEventListener('click', function(){swapLevel(this.__i__);}, false);
}

这种技术实际上也可以让你重用处理程序。

function handleSwap() {
   swapLevel(this.__i__);
}

for (var i=0; i<arr.length; i++) {
    arr[i].__i__ = i
    arr[i].addEventListener('click', handleSwap, false);
}

Answer 2

您的索引不是您认为的那样，因为for循环在调用事件处理程序之前已经运行完成，因此i在所有事件处理程序中都是arr.length。相反，你需要这样的东西来捕获闭包中的索引值，这样你就可以在每个事件处理程序中使用它。函数调用创建一个闭包，因此本示例使用自执行匿名函数来创建闭包：

function load() {
    var arr = document.getElementById('menu').getElementsByClassName('level');

    for (var i=0; i<arr.length; i++) {
        (function(index) {
           arr[i].addEventListener('click', function(){swapLevel(index);}, false);
        })(i);
    }
    // automatically open the first level
    swapLevel(0);
}

Answer 3

你需要在这里使用自我评估闭包来捕获循环每次迭代时i的值，否则你在控制离开for循环后得到i的值： arr.length。

var i;
for (i = 0; i < arr.length; ++i) {
    arr[i].addEventListener('click', function (i) {
        return function () { swapLevel(i); };
    }(i));
}

addEventListener到多个ID

3 个答案: