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）

Answer 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>

Answer 3

这是因为您用新按钮替换了先前的按钮在这一行：

document.body.innerHTML+=evt.type;

在函数中使用以下行：

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

使用按钮addeventlistener不能多次使用

3 个答案: