Event?Target?.add?Event?Listener() 在innerHTML 后不起作用

Question

我动态创建了一个具有EventListener的复选框。不幸的是，如果我使用以下内容更改复选框标签的文本，则 EventListener 不起作用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);
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!');