如何使用循环将事件处理程序正确分配给 JavaScript 中动态生成的元素？

在 Javascript 中使用循环生成事件处理程序

使用动态网页时，通常需要将事件处理程序分配给多个元素，这些元素以编程方式生成。这可以通过使用循环来实现，确保高效和集中的处理。

一种常见的场景是从 AJAX 响应生成多个锚标记 (a)，其中每个标记都需要一个 onclick 事件来提醒相应的数字。但是，像下面这样的简单循环方法可能无法按预期工作：

for (i = 1; i < 11; i++) {
  document.getElementById("b" + i).onclick = function() {
    alert(i);
  };
}

在此示例中，所有事件处理程序共享相同的变量 i，这会导致最后一个处理程序覆盖先前的处理程序并发出警报“ 11"，无论单击哪个标签。

要解决此问题，至关重要的是为每个处理程序创建一个闭包，并将 i 作为参数传递。这确保了每个函数都有自己唯一的 i 值：

function handleElement(i) {
  document.getElementById("b" + i).onclick = function() {
    alert(i);
  };
}

for (i = 1; i < 11; i++) {
  handleElement(i);
}

通过使用handleElement 函数，每个事件处理程序都会被分配一个唯一的 i，从而能够在相应的锚点出现时显示正确的警报消息标签被点击。

以上是如何使用循环将事件处理程序正确分配给 JavaScript 中动态生成的元素？的详细内容。更多信息请关注PHP中文网其他相关文章！