在循环内部应用鼠标悬停事件侦听器

Question

我有一个按钮(<a class="gmButton"></a>)和a <span id="gmToolTip"></span>,我希望span在相关链接被鼠标移动时显示某些文本.

要显示的文本是一个名为的字符串数组toolTips.

gmButtons[i].addEventListener("mouseover", function(){
    clearTimeout(t);
    t = setTimeout(function() { 
        gmToolTip.textContent = toolTips[i];
    }, 500);
});
gmButtons[i].addEventListener("mouseout", function(){
    gmToolTip.textContent = null;
    clearTimeout(t);
});

当逐个应用于链接时,代码似乎按预期执行.在这样的循环中应用它时不起作用.我搞砸了什么？

这是小提琴:http://jsfiddle.net/d5tpqt5h/1/

Answer 1

问题是在您已遍历所有元素后触发事件侦听器函数.这意味着当它们被调用时,i等于9(并且toolTips[9]是未定义的,因为数组中的最后一个元素的索引比它少一个length).

一种选择是将逻辑包装在IIFE中以捕获当前值i:

更新的示例

for (var i = 0; i < gmButtons.length; i++) {
  (function(i) {
    gmButtons[i].addEventListener("mouseover", function() {
      clearTimeout(t);
      t = setTimeout(function() {
        gmToolTip.textContent = toolTips[i];
      }, 500);
    });
    gmButtons[i].addEventListener("mouseout", function() {
      gmToolTip.textContent = null;
      clearTimeout(t);
    });
  })(i);
}

或者,您也可以使用该.bind()方法将当前值传递i给函数:

更新的示例

for (var i = 0; i < gmButtons.length; i++) {
  gmButtons[i].addEventListener("mouseover", function(i) {
    clearTimeout(t);
    t = setTimeout(function() {
      gmToolTip.textContent = toolTips[i];
    }, 500);
  }.bind(this, i));
  gmButtons[i].addEventListener("mouseout", function() {
    gmToolTip.textContent = null;
    clearTimeout(t);
  });
}