我很难表述该问题的标题，但找不到更简洁的内容。
我想将一些事件 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");
关于javascript - 尝试更改元素的 DOM 属性，但在使用 document.body.innerHTML += 后更改被忽略。如果顺序交换，一切正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52593890/