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

Posted 2023-05-07

【中文标题】为啥 addEventListener 在 ES6 中工作一次？ [复制]

【英文标题】：Why addEventListener work once in ES6? [duplicate]为什么 addEventListener 在 ES6 中工作一次？ [复制]

【发布时间】：2018-10-30 12:13:14

【问题描述】：

我不明白为什么 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">

【问题讨论】：

请使用有效的 javascript 修改您的问题以使其更清晰。这似乎是 HTML 和 Javascript 的混乱。

@pjb 抱歉，已编辑。

这与 ES6 无关。你甚至没有在这里使用任何 ES6，也没有class？！

【参考方案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">

【参考方案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。相反，请尝试定位您体内的元素。

【讨论】：

您可能根本不应该编辑innerHTML。任何地方。

这是真的吗？我以前见过，但我也看到很多帖子说这通常没问题。有一个很好的来源说明为什么你不应该使用它？

我可能夸大了，但现在很少需要用 JS 处理原始 HTML 字符串（这可能没问题）。但是这里我们想将数字（即text）放在一个元素中，所以innerHTML 绝对应该避免。 textContent 应该是默认使用的。

我从来不知道textContent。很有帮助，谢谢！