JavaScript addEventListener点击事件问题：点击仅生效一次

问题出在浏览器缓存机制：当你设置img.src = "https://picsum.photos/200/300"后，第一次点击浏览器会请求并缓存该图片；后续点击时，因为URL完全相同，浏览器直接读取缓存内容，不会向服务器请求新图片，所以看起来只切换了一次。

解决办法很简单，给picsum的URL添加一个随机参数，让每次请求的URL都不一样，绕过浏览器缓存：

修改后的代码：

const img = document.createElement("img");

img.src = "https://cdn.pixabay.com/photo/2024/02/05/03/10/sun-8553511_1280.jpg";
img.style.width = "300px";

document.body.appendChild(img);

img.addEventListener("click", function() {
  // 用时间戳作为随机参数，确保每次URL唯一
  img.src = `https://picsum.photos/200/300?${Date.now()}`;
});

也可以用Math.random()生成随机数作为参数，效果一样：

img.src = `https://picsum.photos/200/300?${Math.random()}`;

这些参数不会影响picsum返回图片，只是告诉浏览器这是新资源，每次都会去服务器拉取新的随机图片。

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