我很难措辞这个问题的标题，但找不到更简洁的内容。
我想将一些事件oninput附加到一个元素(这里是input字段(。但由于某种原因，它没有奏效。我将问题范围缩小到原理图MWE(最后是完整的MWE(。
addEvent();
document.body.innerHTML += "a";
addEvent()只是一个更改input字段oninput属性的函数。我的问题是addEvent()被忽略了。
为了确保addEvent();正常运行，我还修改了input字段的value及其在函数主体中的backgroundColor。然而，当我运行代码时，oninput和value修改无处可寻，但backgroundColor已根据函数进行了修改。
如果我写，对我来说更神秘
document.body.innerHTML += "a";
addEvent();
事情按预期工作。
我的问题分为两部分：
- 如何修复
addEvent()的代码，这样无论我之前还是之后写document.body.innerHTML += "a"，结果都是一样的？ - 为什么
backgroundColor运行良好，而其余部分似乎被忽略了？
以下是我的完整 MWE：
function addEvent() {
var fieldScore = document.getElementById("foo");
fieldScore.style.backgroundColor = "rgb(0,255,0)";
fieldScore.value = "a";
fieldScore.oninput = function () {
console.log("bar");
}
}
// document.body.innerHTML = buildForm();
addEvent();
document.body.innerHTML += "a";<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form><input type="text" value="" name="foo" id="foo"></form>
<script type="text/javascript" src="mwe.js"></script>
</body>
</html>预期：相同，但在input领域也有a。
innerHTML +=几乎总是反模式。它使浏览器这样做：
- 遍历你在其上执行它的元素的所有子项和子项的子项等，并构建一个 HTML 字符串。
- 将文本追加到该字符串。
- 销毁所有这些子元素(及其子元素等(，解析 HTML 字符串，并将它们替换为由于解析字符串而创建的新元素。
在此过程中，事件处理程序和有关已销毁元素的任何其他非 HTML 信息都将丢失。
如果需要追加到元素，请使用appendChild或insertAdjacentHTML。例如：
document.body.appendChild(document.createTextNode("a"));
或
document.body.insertAdjacentHTML("beforeend", "a");