javascript中的EventListener无法更新DOM答案

【问题标题】：EventListener in javascript not working on updating DOMjavascript中的EventListener无法更新DOM
【发布时间】：2022-11-14 21:30:33
【问题描述】：

Javascript 事件侦听器不更新 DOM。

**HTML代码： **



    <div class="task-list">
        
    </div>

** JAVASCRIPT 代码：**

function showList(num) {
    const taskBox = document.querySelector('.task-list'); 
    let listHtml = "";
            
    for(let i =1;i<=num;i++){
        listHtml +=  `
            <li class="list-item">Hello ${i}</li>
        `;
    }

    taskBox.innerHTML = listHtml; 
}

showList(5);


const listItem = document.querySelectorAll('.list-item'); 
listItem.forEach((item) => {
    item.addEventListener('click', (e) => {
        console.log(e.target.innerText);
        showList(4);
    }); 
});

使用此代码事件侦听器只需工作一次。之后它无法正常工作，甚至没有显示错误。那么为什么会发生这种情况。如何准确更新影响事件监听器的 DOM。

我多次遇到这个问题，我通过在每个 elmeent 上使用 onclick() 函数解决了这个问题，但我从来没有得到解决方案为什么它不能以这种方式工作。

【问题讨论】：

标签： javascript ecmascript-6 addeventlistener

【解决方案1】：

原因是再次调用showList()后，需要再次添加点击事件

const listItem = document.querySelectorAll('.list-item'); 
listItem.forEach((item) => {
    item.addEventListener('click', (e) => {
        console.log(e.target.innerText);
        showList(4);// after create new element,need to add event again
    }); 
});

function showList(num) {
    const taskBox = document.querySelector('.task-list'); 
    let listHtml = "";
            
    for(let i =1;i<=num;i++){
        listHtml += `<li class="list-item">Hello ${i}</li>`;
    }

    taskBox.innerHTML = listHtml;
    addClickEvent()
}

function addClickEvent(){
  const listItem = document.querySelectorAll('.list-item'); 
  listItem.forEach((item) => {
      item.addEventListener('click', (e) => {
          console.log(e.target.innerText);
          showList(4);
      }); 
  });
}

showList(5);

<div class="task-list">
        
</div>

【讨论】：