如何在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(' ');
  }
}

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变量都会发生变化，在循环结束时，它将作为循环中的最后一项保留。但是，您创建每个函数都指向这个相同的变量。相反，您需要一个变量per，因此可以像上面那样创建一个本地副本。

你也可以通过链接来缩短这段时间，但我觉得在这种情况下，这一点变得模糊了，因为问题是作用域和引用。