如何做到早在JavaScript事件处理程序绑定？ （实施例与jQuery）

Question

JavaScript的后期绑定是巨大的。但我怎么早绑定时，我想？

我使用jQuery添加与事件处理程序链接在一个环路到一个div。变量“ATAG”改变了循环。当我点击链接后，所有的链接提醒相同的消息，这是“航空运输行动”的最后一个值。我如何结合不同的警报消息到所有链接？

所有链接应与值警告“航空运输行动”已经当添加事件处理程序，不被点击时。

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.click(function() { alert(aTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 1

可以将数据传递给所述bind方法：

nextTag.bind('click', {aTag: aTag}, function(event) {
    alert(event.data.aTag);
});

这将使aTag的副本，所以每个事件处理程序将具有不同的值它。你的使用情况正是此参数来bind存在的原因。

全码：

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    nextTag.bind('click', {aTag: aTag}, function(event) {
      alert(event.data.aTag);
    });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

Answer 2

您也可以让一个包装函数，它的文本警报作为参数，并返回事件处理程序

function makeAlertHandler(txt) {
  return function() { alert(txt); }
}

和替换

nextTag.click(function() { alert(aTag); });   

与

nextTag.click(makeAlertHandler(aTag));

Answer 3

您需要保持这个变量的副本，是这样的：

for (aTag in tagList) {
  if (tagList.hasOwnProperty(aTag)) {
    nextTag = $('<a href="#"></a>');
    nextTag.text(aTag);
    var laTag = aTag;
    nextTag.click(function() { alert(laTag); });
    $('#mydiv').append(nextTag);
    $('#mydiv').append(' ');
  }
}

在aTag变量改变每次循环中，在它的左如在循环的最后一个项目的循环的结束。然而，每个功能以这个的相同变量创建点。相反，你要每变量，所以复制一个本地副本像我有以上。

您也可以缩短这个倒不少有链接，但我觉得它密布在这种情况下的点，因为这个问题是确定范围和引用。