为什么事件监听器只添加到第一个元素？

问题描述

因此，在单击按钮后，此循环会遍历数组并创建一个包含来自每个数组元素的数据的 div。现在，在将 div 注入 DOM 后，我向它们添加了一个事件侦听器，但只有第一个添加的元素会响应。 :/ 其他人都死了。有什么提示吗？

btnLeft.addEventListener("click",function(){
    let output = "";
    for(let x of array){
        output += `<div class="listItem" data-id="${x.id}">
            <ul>
                <li>Name: ${x.name}</li>
                <li>Price: ${x.price}</li>
            </ul>
        </div>`;
    }

    leftList.innerHTML = output;

    document.querySelector(".listItem").addEventListener("click",function(){
        console.log(this.getAttribute("data-id"));
    });
});

解决方法

文档方法 querySelector() 返回文档中与指定选择器或选择器组匹配的第一个元素。如果未找到匹配项，则返回 null。

由于 document.querySelector(".listItem") 仅选择与指定选择器匹配的第一个元素，因此事件侦听器仅应用于第一个元素。

Document 方法 querySelectorAll() 返回一个静态（非活动）NodeList，表示与指定选择器组匹配的文档元素列表。

尝试使用 document.querySelectorAll(".listItem") 并循环遍历它以向所有元素添加事件侦听器。