如何使用事件委托为缩略图添加点击事件以切换大图及标题？

嘿，别发愁啦！用事件委托来实现这个需求其实非常清晰，只需要给所有缩略图的父容器绑定一个点击事件处理程序就够了，不用给每个小图单独加监听。下面是具体的实现步骤和代码：

核心思路 #

事件委托的关键在于利用事件冒泡：点击子元素（缩略图）时，事件会冒泡到父容器#thumbnails，我们在父容器上监听这个事件，然后通过事件对象判断实际被点击的是不是缩略图，再执行对应的切换逻辑。

完整JavaScript代码（放到js/chapter09-project02.js里） #

// 等待页面DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
    // 获取缩略图的父容器
    const thumbnailsContainer = document.getElementById('thumbnails');
    // 获取大图区域的图片和标题元素
    const featuredImage = document.querySelector('#featured img');
    const featuredCaption = document.querySelector('#featured figcaption');

    // 给父容器绑定点击事件（事件委托的核心）
    thumbnailsContainer.addEventListener('click', function(event) {
        // 确保我们点击的是缩略图img元素，而不是容器的空白区域
        if (event.target.tagName === 'IMG') {
            // 获取被点击缩略图的title属性和src路径
            const imageTitle = event.target.title;
            let imageSrc = event.target.src;
            
            // 把路径里的/small/替换成/medium/，得到对应的大图路径
            imageSrc = imageSrc.replace('/small/', '/medium/');

            // 更新大图区域的图片和标题
            featuredImage.src = imageSrc;
            featuredImage.title = imageTitle;
            featuredCaption.textContent = imageTitle;
        }
    });
});

代码解释 #

• DOMContentLoaded事件：确保我们在页面所有DOM元素都加载完成后再绑定事件，避免出现找不到元素的情况。
• 事件委托绑定到父容器：只需要给#thumbnails绑定一次事件，不管里面有多少缩略图（哪怕后续动态新增）都能生效，比给每个img单独绑事件更高效。
• 判断点击目标：通过event.target.tagName检查点击的是不是img元素，防止点击容器空白处时触发无效逻辑。
• 路径替换：因为你的大图存在images/medium/文件夹，缩略图在images/small/，所以把路径里的small替换成medium就能得到对应大图的地址。
• 更新大图区域：替换#featured里的图片src和figcaption的文本，同时更新大图的title属性保持一致。

这样就能完美实现你要的功能啦，只用一个事件处理程序就搞定所有缩略图的点击切换！

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