为什么 addEventListener 在 ES6 中工作一次？ [复制]

Question

我不明白为什么 addEventListener 工作一次？

let input = document.querySelector(".send");
let i = 0;

input.addEventListener('click',(e)=>{
   e.preventDefault();
   i+=1;
   document.body.innerHTML += i;
});

<input type="submit" class="send">

Answer 1

这是因为这条线：

document.body.innerHTML

“移除”之前的 set 监听器。您实际上以这种侦听器丢失输入元素的方式更改了 html。

您可以使用 createTextNode 来解决此问题，或者使用 createElement 和 appendChild 来使用新创建的 HTML 节点：

var input = document.querySelector(".send");

var i = 0;

input.addEventListener('click',function(e){
   e.preventDefault();
   i+=1;
   // option 1: use a new node, but in order to prevent the same innerHTML bug again use option 2 instead
   //var newNode = document.createElement("span");
   //newNode.innerHTML = i;
   //document.body.appendChild(newNode);
   // option 2 use createTextNode so that innerHTML is not used at all
   document.body.appendChild(document.createTextNode(i));
});

<input type="submit" class="send">

Answer 2

此代码将按照您希望的方式运行：

let input = document.querySelector(".send");
let result = document.querySelector("#result");

let i = 0;

input.addEventListener('click', (e)=>{
   e.preventDefault();
   i += 1;
   result.innerHTML += i;
})

<input type="submit" class="send">
<div id="result"></div>

您不应该编辑正文本身的 innerHTML。相反，请尝试定位您体内的元素。