如何在 JavaScript 中对事件处理程序进行早期绑定？（以 jQuery 为例）

Question

JavaScript 的后期绑定很棒。但是我想怎么提前绑定呢？

我正在使用 jQuery 将循环中的事件处理程序链接添加到 div。变量“aTag”在循环中发生变化。当我稍后单击链接时，所有链接都会发出相同的消息，即“aTag”的最后一个值。如何将不同的警报消息绑定到所有链接？

所有链接都应该在添加事件处理程序时使用 '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(' ');
  }
}