调用QR API生成二维码时，应使用何种事件监听器？

你可以使用图片元素的**load事件监听器**，它会在新的二维码图片完全加载完成（也就是替换完成的瞬间）时触发。

修改后的代码示例： #

JavaScript 代码：

const image = document.getElementById("myImg");
const button = document.getElementById("myButton");

function handleImageLoad() {
  // 这里写二维码加载完成后需要执行的逻辑
  console.log("二维码已更新完成");
}

function changeImage() {
  // 先移除旧的监听器，避免重复触发
  image.removeEventListener("load", handleImageLoad);
  // 添加新的监听器
  image.addEventListener("load", handleImageLoad);
  // 设置新的二维码图片地址
  image.setAttribute("src","http://api.qrserver.com/v1/create-qr-code/?data=www.facebook.com&size=150x150&margin=15");
}

button.addEventListener("click", changeImage);

HTML 代码：

<img id="myImg" src ="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d0/QR_code_for_mobile_English_Wikipedia.svg/1200px-QR_code_for_mobile_English_Wikipedia.svg.png" style="width: 150px; height: 150px;">
<button id="myButton">Change!</button>

说明： #

• 每次点击按钮更换图片时，先移除之前绑定的load事件（防止多次点击后重复触发回调），再重新绑定。
• 当新的二维码图片从API加载完成并渲染到页面上时，load事件会被触发，此时你可以在handleImageLoad函数里执行后续操作，比如提示用户更新完成、执行其他业务逻辑等。

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