如何有效地将事件处理程序分配给 JavaScript 中动态生成的元素？-js教程-PHP中文网

如何有效地将事件处理程序分配给 JavaScript 中动态生成的元素？

Barbara Streisand

发布： 2024-11-29 12:05:14

原创

620 人浏览过

How Can I Efficiently Assign Event Handlers to Dynamically Generated Elements in JavaScript?

如何在 JavaScript 中使用循环高效生成事件处理程序

假设您在 HTML 文档中动态生成了元素，例如多个锚标记。要将事件处理程序分配给每个元素，您可以考虑使用类似于以下内容的循环：

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);

登录后复制

通过利用此技术，每个处理程序都被分配了其唯一的 i 值，并实现了所需的行为，每个处理程序都会警告正确的值（ 1 到 10).

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