Vanilla JS中多次触发事件[重复]答案

【问题标题】：event triggering multiple times in Vanilla JS [duplicate]Vanilla JS中多次触发事件[重复]
【发布时间】：2020-11-12 00:14:32
【问题描述】：

我有一个使用 Vanilla JS 的代码。我使用一个按钮添加了动态内容。但问题是当我单击动态生成的内容时，它会返回第一次点击：1 第二次点击：3 第三次点击：6 第四次点击：10

但应该是 1、2、3、4

HTML 代码如下：

<p>Add Content</p>
  <div class="dynamic-content">

JS文件如下：

let counter = 1;
document.querySelector("p").addEventListener("click", function(){
  document.querySelector(".dynamic-content").innerHTML += `
    <span>My dynamic content - ${counter}</span>
  `;
  counter++;
});

document.querySelector("body").addEventListener("click", function(){
  let contentList = document.querySelectorAll(".dynamic-content span");
  if(contentList.length){
    contentList.forEach(function(el){
      el.addEventListener("click", function(event){
        console.log(event.target.innerText);
      });
    });
  }
});

注意：我们不能使用 jQuery

【问题讨论】：

难怪每次单击文档正文时，都会为元素添加一堆新的侦听器。
在另一个事件监听器中添加事件监听器几乎是不对的。
添加新跨度时，只需向该跨度添加事件侦听器即可。不要每次都将事件侦听器添加到所有跨度。
或者使用事件委托，这样你就不需要每次都添加新的事件监听器了。

标签： javascript events dynamic-content

【解决方案1】：

let counter = 1;
document.querySelector("p").addEventListener("click", function(){
  const element = document.createElement("span") 
  element.innerHTML += `My dynamic content - ${counter}`;
  document.querySelector(".dynamic-content").appendChild(element)
  element.addEventListener("click", function(){
     console.log('element')
     // here logic
  })
  counter++;
});

https://www.w3schools.com/jsref/met_document_createelement.asp 尝试使用document.createElement，然后将事件添加到创建的元素中，在此解决方案中，您只会将一个事件添加到 HTML 标记。

【讨论】：