如何为NodeList中的每个seemore类div添加可用的click事件监听器

问题原因 #

addEventListener方法的第二个参数需要传入事件触发时才执行的回调函数引用，你当前直接写入了console.log("this is working")，这段代码会在JS执行到事件绑定这一行时立即运行，不会等待点击事件触发，所以会出现页面加载阶段直接打印9次、点击按钮无响应的问题。

修正代码 #

const movieIntegration = () => {
    // 优化：先拼接所有DOM字符串，一次性插入避免多次触发页面重绘
    let movieHtml = ''
    allMovies.forEach(movie => {
        movieHtml += `<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>`
    })
    movieGallery.innerHTML = movieHtml

    const seemore = document.querySelectorAll(".seemore")
    seemore.forEach(elm => {
        // 将执行逻辑包裹在匿名函数中作为回调传入
        elm.addEventListener("click", () => {
            console.log("this is working")
            // 此处补充点击后展开详情的逻辑
        }, true)
    })
}

更优方案：事件委托 #

你也可以直接给父容器绑定事件，不需要循环遍历每个seemore元素，后续如果动态新增电影内容也不需要重新绑定事件：

const movieIntegration = () => {
    let movieHtml = ''
    allMovies.forEach(movie => {
        movieHtml += `<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>`
    })
    movieGallery.innerHTML = movieHtml

    // 父容器绑定事件，通过事件冒泡判断点击目标
    movieGallery.addEventListener('click', (e) => {
        if(e.target.classList.contains('seemore')) {
            console.log("this is working")
            // 补充展开逻辑
        }
    }, true)
}

内容的提问来源于stack exchange，提问作者Saantuu