javascript – 为什么addEventListener在ES6中工作一次？

参见英文答案 > Is it possible to append to innerHTML without destroying descendants’ event listeners?                                    11个
我不明白为什么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">

解决方法

这是因为这一行：

document.body.innerHTML

“删除”前一组侦听器.实际上你改变html的方式是这个监听器失去了对input-element的跟踪.

您可以使用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">