点击图片列表内的图片时，如何正确获取对应图片的URL？

你原来的代码存在两个核心问题：

• 点击事件回调中判断的是#background元素的当前背景图，点击图片触发回调的时间点早于背景图更新逻辑的执行时机，所以拿到的是点击前的旧背景图值，才会打印上一张图的日志。
• 没有利用事件对象获取实际点击的目标元素，逻辑完全没有和你点击的具体图片做关联。

利用事件冒泡的事件对象拿到实际点击的图片元素，直接读取点击目标的属性即可，代码如下：

document.getElementById("image-list").addEventListener('click', function(e){
    // 获取实际点击的元素
    const clickTarget = e.target;
    // 仅当点击的是图片元素时执行日志逻辑
    if(clickTarget.tagName.toLowerCase() === 'img') {
        // 读取点击图片的src属性，提取图片编号
        const imgSrc = clickTarget.getAttribute('src');
        const imgId = imgSrc.split('/').pop().split('.')[0];
        console.log(`I clicked in the image ${imgId}`);
        // 如果你有更新背景图的需求，也可以在这里同步执行
        // document.getElementById("background").style.backgroundImage = `url(${imgSrc})`;
    }
});

这个方案用事件委托实现，不管后续新增多少张图片，都不用额外绑定事件，直接就能生效。因为是直接读取你点击的那张图片的属性，不会依赖背景图的更新时机，完全不会出现日志和点击图片不匹配的问题。

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