Javascript 在循环中附加事件（即7）

我正在尝试将函数绑定到Internet Explorer 7中节点列表中的项

for(var j = 0; j < navLabels.length; j++)
{
    navInsets[j].onmouseover = function(){showLabel(navLabels[j], true);};
    navInsets[j].onmouseout = function(){showLabel(navLabels[j], false);};
    navInsets[j].onclick = function(){selectNew(j);};
    navLabels[j].onclick = function(){selectNew(j);};
}

for（var j=0；j

showLabel（）和selectNew（）都是我自己的函数。它们每个都需要传递一个索引，在本例中，该索引是j

我知道，在匿名函数中，j最终将是对j的引用，而不是j的值。我也知道我可以使用addEventListener或bind方法来实现这一点，但在IE7中这两种方法都是不允许的。我甚至知道attachEvent方法适用于ie7，但由于我需要传递参数，我需要将函数包装在匿名函数中以使用attachEvent（至少看起来是这样），这是最初的问题

---

关于这个问题有没有不太老套的想法？谢谢。

使用匿名函数来隐藏

j

：

(function(j) {
    navInsets[j].onclick = function() {selectNew(j);};
    ...
})(j);

---

这将强制通过函数范围内的值传递

j

。

使用匿名函数来隐藏

j

：

(function(j) {
    navInsets[j].onclick = function() {selectNew(j);};
    ...
})(j);

---

这将强制函数范围内的值传递

j

。

您不必为每个绑定事件使用IIFE。您可以在所有事件绑定中使用相同的捕获

j

：

for(var j = 0; j < navLabels.length; j++) {
    (function(j) {
        navInsets[j].onmouseover = function(){showLabel(navLabels[j], true);};
        navInsets[j].onmouseout = function(){showLabel(navLabels[j], false);};
        navInsets[j].onclick = function(){selectNew(j);};
        navLabels[j].onclick = function(){selectNew(j);};
    })(j);
}

for（var j=0；j

---

我想你再也找不到比这更干净的了。您可能能够提取匿名函数并使其成为命名函数（与

navInsets

和

navLabels

的作用域相同），但这可能会使您很难看到循环的实际作用（因为您必须查找一次性函数）。我看不到任何明显的其他解决方案，因为您无论如何都需要一个闭包。

您不一定需要为每个绑定事件使用IIFE。您可以在所有事件绑定中使用相同的捕获

j

：

for(var j = 0; j < navLabels.length; j++) {
    (function(j) {
        navInsets[j].onmouseover = function(){showLabel(navLabels[j], true);};
        navInsets[j].onmouseout = function(){showLabel(navLabels[j], false);};
        navInsets[j].onclick = function(){selectNew(j);};
        navLabels[j].onclick = function(){selectNew(j);};
    })(j);
}

for（var j=0；j

---

我想你再也找不到比这更干净的了。您可能能够提取匿名函数并使其成为命名函数（与

navInsets

和

navLabels

的作用域相同），但这可能会使您很难看到循环的实际作用（因为您必须查找一次性函数）。我看不到任何明显的其他解决方案，因为您无论如何都需要一个闭包。

看看您的代码，我认为您可以通过使用事件冒泡/委托来优化代码。如果您准备投入一些时间，那么通过学习jQuery您可能会收获很多

如果没有站点的HTML代码（以及showLabel（）和selectNew（）的确切工作方式），我无法进一步帮助您，但通常，在导航列表上设置点击鼠标处理程序可以通过以下简单的方式完成：

 $('ul#nav').on('click', 'label', function(){
     selectNew(this);
 });

---

看看你的代码，我认为你可以通过使用事件冒泡/委托来优化你的代码。如果你准备投入一些时间，你可能会通过学习jQuery获得很多

如果没有站点的HTML代码（以及showLabel（）和selectNew（）的确切工作方式），我无法进一步帮助您，但通常，在导航列表上设置点击鼠标处理程序可以通过以下简单的方式完成：

 $('ul#nav').on('click', 'label', function(){
     selectNew(this);
 });

---

老实说，在这种情况下，您只需要一个索引，我会将它直接存储在元素上

for(var j = 0; j < navLabels.length; j++)
{
    navInsets[j].j = j;
    navInsets[j].onmouseover = function(){showLabel(navLabels[this.j], true);};
    navInsets[j].onmouseout = function(){showLabel(navLabels[this.j], false);};
    navInsets[j].onclick = function(){selectNew(this.j);};
    navLabels[j].onclick = function(){selectNew(this.j);};
}

for（var j=0；j

这是一种非常轻、干净和快速的解决方案。只是不要储存元件本身，因为这可能会导致泄漏

但是只存储一个索引是无害的，它避免了闭包泄漏的可能性

---

---

另外，可能有更好的“DOM遍历”解决方案，但这取决于您的标记。

老实说，在这种情况下，您只需要一个索引，我会将它直接存储在元素上

for(var j = 0; j < navLabels.length; j++)
{
    navInsets[j].j = j;
    navInsets[j].onmouseover = function(){showLabel(navLabels[this.j], true);};
    navInsets[j].onmouseout = function(){showLabel(navLabels[this.j], false);};
    navInsets[j].onclick = function(){selectNew(this.j);};
    navLabels[j].onclick = function(){selectNew(this.j);};
}

for（var j=0；j

这是一种非常轻、干净和快速的解决方案。只是不要储存元件本身，因为这可能会导致泄漏

但是只存储一个索引是无害的，它避免了闭包泄漏的可能性

---

---

此外，可能还有更好的“DOM遍历”解决方案，但这取决于您的标记。

很好。我知道这基本上与Blender提供的答案相同，但您很好心，给出了一个可以复制/粘贴的答案，所以我将此标记为答案。谢谢。@dom是的，我们的答案相当。很好。我知道这基本上是t