为啥事件监听器只在 for 循环中创建的最后一个元素上注册？ [复制]

Posted 2023-05-07

【中文标题】为啥事件监听器只在 for 循环中创建的最后一个元素上注册？ [复制]

【英文标题】：Why does the event listener only register on the last element created in for loop? [duplicate]为什么事件监听器只在 for 循环中创建的最后一个元素上注册？ [复制]

【发布时间】：2015-08-21 10:36:14

【问题描述】：

我正在使用 javascript 创建复选框，将 onchange 侦听器添加到它们并使用循环将它们添加到 div。但是，只有最后一个复选框注册了事件侦听器。

为什么会这样？

var div = document.getElementById("mydiv");
for (var i = 0; i < 5; i++) 
    div.innerhtml += ("<br>" + i);
    var input = document.createElement("input");
    input.type = "checkbox";
    input.onchange = function() 
      alert("foo");
    ;
    div.appendChild(input);

<div id="mydiv"></div>

【参考方案1】：

使用Element.innerHTML 属性附加到div 会删除现有的事件处理程序，因为它确实在这样做...

div.innerHTML = (div.innerHTML + '<br>' + i); 

所以它完全重写了 HTML，所有事件处理程序都丢失了。

请改用Document.createElement() 和Document.createTextNode()。

var div = document.getElementById("mydiv");
for (var i = 0; i < 5; i++) 
    div.appendChild(document.createElement('br'));
    div.appendChild(document.createTextNode(i));
    var input = document.createElement("input");
    input.type = "checkbox";
    input.onchange = function() 
      alert("foo");
    ;
    div.appendChild(input);

<div id="mydiv"></div>