在循环中附加事件(IE 7)

Question

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

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);};
}

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

我知道，在匿名函数中，j最终将是对j的引用，而不是j的值。我还知道我可以使用addEventListener或bind方法来做这件事，但在IE7中这两种方法都是不允许的。我甚至知道attachEvent方法适用于ie7，但由于我需要传递参数，我需要将函数包装在匿名函数中才能使用attachEvent (至少看起来是这样)，这是原始问题。

在这个问题上有什么不太老套的想法吗？谢谢。

Answer 1

您不一定需要为每个绑定事件使用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);
}

我不认为你能得到比这更“干净”的东西。您可以提取匿名函数并使其成为命名函数(与navInsets和navLabels在相同的作用域中)，但这可能会使您很难看到循环的实际作用(因为您必须查找一次性函数)。我看不到任何明显的其他解决方案，因为你无论如何都需要一个闭包。

Answer 2

使用匿名函数来隐藏j

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

这将强制在您的函数范围内通过值传递j。

Answer 3

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

如果没有你站点的超文本标记语言代码(以及showLabel()和selectNew()的确切工作原理)，我就不能进一步帮助你了，但是通常情况下，在导航列表上设置一个点击和鼠标经过的处理程序就可以通过这样简单的事情来完成；

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