addeventlistener 不能使用按钮多次工作

Question

事件仅在第一次单击按钮时触发。

<button id="b">huerig</button>
<script>
  y = function(evt) {
    document.body.innerHTML += evt.type;
  }
  b = document.querySelector("#b");
  b.addEventListener("click", y);
</script>

Answer 1

当您使用 连接容器时innerHTML，对容器内元素的任何 Javascript 引用都会丢失，所有侦听器也是如此 - 容器将根据新的 HTML 字符串清空并重新解析。

为避免此问题，请改为附加实际元素：

const y = function(evt) {
  document.body.appendChild(document.createElement('div'))
    .textContent = evt.type;
}
const b = document.querySelector("#b");
b.addEventListener("click", y);

<button id="b">huerig</button>

或使用insertAdjacentHTML：

const y = function(evt) {
  document.body.insertAdjacentHTML('beforeend', evt.type);
}
const b = document.querySelector("#b");
b.addEventListener("click", y);

<button id="b">huerig</button>

（你也应该尽量避免隐式创建全局变量-使用const/ let/var创建新变量时）