addeventlistener 不能使用按钮多次工作[重复]答案

【问题标题】：addeventlistener not working more than once with a button [duplicate]addeventlistener 不能使用按钮多次工作[重复]
【发布时间】：2018-12-09 18:35:54
【问题描述】：

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

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

【问题讨论】：

标签： javascript addeventlistener event-listener

【解决方案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);

&lt;button id="b"&gt;huerig&lt;/button&gt;

或者使用insertAdjacentHTML:

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

&lt;button id="b"&gt;huerig&lt;/button&gt;

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

【讨论】：

【解决方案2】：

document.body.innerHTML 正在删除 javascript 引用，document.body 变为空。创建一个 div 并在其中添加文本

var b = document.querySelector("#b");
let count = 0;
let y = function(evt) {

  document.querySelector("#text").innerHTML += evt.type + count;
  count++

}
b.addEventListener("click", y);

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

【讨论】：

【解决方案3】：

这是因为你用新按钮替换了以前的按钮在这一行中：

document.body.innerHTML+=evt.type;

在你的函数中使用这一行：

   var ne=document.createElement("SPAN");
   ne.innerHTML=evt.type;
   document.body.appendChild(ne);

【讨论】：