如何在 NodeList 中的每个 div 上添加一个 eventListener

Question

我正在寻找两天时间，了解如何在我的节点列表中的每个 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”class（returns NodeList）的 divs 并添加一个在点击时起作用的 eventListener，但当我这样做时然后 console.log 单击时显示一条消息，我的控制台显示该消息的九次，但我没有单击按钮，然后单击它们时没有任何反应。

有人可以帮我吗？

(ps：对不起，如果你误会了，我英文不好)

Answer 1

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

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

如何在 NodeList 中的每个 div 上添加一个 eventListener

how to add an eventListener on each div in a NodeList

javascript

api

addeventlistener

nodelist