javascript - 事件​目标​.add​事件​Listener() 在innerHTML之后不起作用

Question

这个问题已经有答案了:

Is it possible to append to innerHTML without destroying descendants' event listeners? (13 个回答)

已关闭 4 年前。

我动态创建一个复选框，其中包含 EventListener 。不幸的是，如果我使用 innerHTML 更改复选框标签的文本，则 EventListener 不起作用:

let label = document.createElement('label'),
    input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);
label.innerHTML += 'Select Me!';

如何规避这个问题以及为什么它会存在？

这是一个没有 innerHTML 的工作片段:

let label = document.createElement('label'),
    input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);

Answer 1

当您连接到元素的 innerHTML 时，其内容将被清除，现有的 HTML 字符串将与新字符串连接，然后容器的内容将被重新排列- 根据新的 HTML 字符串计算。 ~~监听器~~ 附加到容器中先前元素的元素不会在序列化过程中保留 - 更改 innerHTML 后容器的子元素是新的。

改为附加文本节点:

let label = document.createElement('label');
let input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);
label.appendChild(document.createTextNode('Select Me!'));

或者使用insertAdjacentHTML:

let label = document.createElement('label');
let input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);
label.insertAdjacentHTML('beforeend', 'Select Me!');