onerror反复执行是因为回调中重试加载失败资源会再次触发该事件，形成无限循环；可靠移除方式有：①addEventListener配{once:true}、②handler内设onerror=null、③用命名函数配合removeEventListener。
onerror 触发后为什么还会反复执行？
因为 onerror 回调里如果又尝试加载同一个失败资源（比如重试 <img alt="HTML如何用事件移除解决onerror循环" > 的 src），而新 src 仍不可用，就会再次触发 onerror，形成无限循环。浏览器不会自动阻止这种递归触发——它只管“资源加载失败就调用这个 handler”，不管 handler 里干了什么。
移除事件监听器的三种可靠方式
关键不是“不触发”，而是“触发一次后彻底断开连接”。有三个主流做法，按推荐顺序排列：
- 用
addEventListener+{ once: true }：最干净，现代浏览器全支持，无需手动清理img.addEventListener('error', () => { img.src = '/fallback.jpg'; }, { once: true }); - 在
onerror函数体内手动清空自身：onerror = null或this.onerror = null（注意 this 指向）img.onerror = function() { this.src = '/fallback.jpg'; this.onerror = null; }; - 用
removeEventListener：前提是用命名函数绑定，且确保引用一致；匿名函数无法被移除function handleError() { img.src = '/fallback.jpg'; img.removeEventListener('error', handleError); }<br>img.addEventListener('error', handleError);
常见陷阱：看似移除了，其实没生效
这些写法看着像移除，但实际无效：
-
img.onerror = null写在 handler 外部（比如 DOM 加载完就执行），此时 handler 还没触发，等于白设 - 用箭头函数绑定
addEventListener后试图移除：img.removeEventListener('error', () => {...})—— 每次都是新函数，永远对不上 - 在 handler 里改
src后没检查新地址是否真能加载，结果 fallback 图也 404，继续触发onerror（哪怕已设null，也要确认 fallback 资源存在） - Vue/React 等框架中直接操作原生
onerror，但组件卸载后 DOM 节点仍残留监听器，可能引发内存泄漏或误触发
服务端 fallback 比前端重试更稳
如果错误源于路径拼错、CDN 缓存失效或权限问题，前端换一个 src 很可能还是失败。更可靠的方案是让服务端接管：
立即学习“前端免费学习笔记（深入）”；
- Nginx 配置
try_files $uri /fallback.jpg;，所有 404 图片自动返回兜底图 - 后端路由匹配图片请求，捕获文件不存在异常，直接返回默认占位图响应（HTTP 200）
- 这样连
onerror都不需要绑——没有失败，就没有循环
真正难处理的是跨域图片加载失败时，onerror 可能不触发（浏览器出于安全限制静默丢弃），这时候靠前端事件移除已经没意义了，得从资源部署和 CORS 策略入手。
