为什么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

"删除"前一组侦听器.实际上你改变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">