如何在 NodeList 中的每个 div 上添加 eventListener [重复]答案

【问题标题】：how to add an eventListener on each div in a NodeList [duplicate]如何在 NodeList 中的每个 div 上添加 eventListener [重复]
【发布时间】：2021-12-05 19:58:35
【问题描述】：

我正在寻找两天时间来了解如何在我的 Nodelist 中的每个 div 上添加一个 eventListener。我正在为学校使用 API，我们必须显示电影，它们需要被编辑、喜欢等等，所以我想在电影海报上放置一个“查看更多”按钮来显示按钮和更多信息。这是我的代码：

const movieIntegration =() => {
    allMovies.map(movie=> {
        movieGallery.innerHTML += `<div class="imgContainer">
                                        <img src="${movie.img}" alt="${movie.name}">
                                                <div class="titleContainer">
                                                    <div class="movieTitle"> ${movie.name} </div>
                                                    <div class="seemore"> See more </div>
                                                </div>
                                    </div>`
    })

const seemore = document.querySelectorAll(".seemore")
    seemore.forEach(elm => {
        elm.addEventListener("click", console.log("this is working"), true)
    })

}

现在我需要使用“seemore”类获取所有 div（它返回一个 NodeList）并添加一个在单击时起作用的 eventListener，但是当我这样做时，console.log 在单击时显示一条消息，我的控制台显示九时间消息，但我没有点击按钮，然后，当我点击它们时，什么也没有发生。

有人可以帮帮我吗？

（ps：如果你误会了，对不起，我英语不好）

【问题讨论】：

console.log(…) 不是函数。 addEventListener 需要函数。使用event delegation 而不是分配多个事件监听器 — 它更易于维护，并且适用于动态添加的元素。例如，使用event argument 的target。见the tag info 和What is DOM Event delegation?。
我阅读了 MDN Web Doc 中关于事件委托的内容，但我不知道我是否理解它是什么，但是当我有更多时间时，我会仔细研究它，谢谢:)

标签： javascript api addeventlistener nodelist

【解决方案1】：

您的代码无法正常工作，因为您使用的是 console.log 的返回值作为侦听器。如果您希望侦听器成为调用 console.log 的函数，请使用以下语法

elm.addEventListener("click", () => console.log("this is working"), true)

【讨论】：

非常感谢，我昨天已经尝试过了，但没有成功，我认为是因为缺少“true”，但你完美地回答了我的问题，谢谢 :)