onerror事件的理解与用法

onerror 是 HTML 元素的事件处理程序之一，用于捕获和处理错误。当网页中的某个元素（如图片、脚本或样式表）加载失败时，onerror 事件会被触发。常用于处理资源加载失败的情况，避免页面出现破损或空白内容。

1. 常见的应用场景

（1) 图片加载失败

当图片无法加载时，onerror 事件会被触发，你可以使用它来显示备用图片或进行错误处理。

<img src="image.jpg" onerror="this.src='fallback.jpg';" alt="Image">

（2) 脚本加载失败

如果 JavaScript 脚本加载失败，可以使用 onerror 事件来进行错误提示。

 

<script src="script.js" onerror="alert('Script loading failed!')"></script>

2. 用于 window.onerror 捕获全局错误

window.onerror 是一个全局事件处理程序，用于捕获页面中所有的未处理 JavaScript 错误。其语法如下：

window.onerror = function(message, source, lineno, colno, error) {
  console.log('Error: ' + message);
  return true;  // 阻止默认的错误提示
};

3. onerror 和资源加载

可以利用 onerror 来为资源加载失败时提供备用方案：

<script src="nonexistent.js" onerror="alert('JavaScript file failed to load');"></script>

4. 兼容性

onerror 事件广泛支持，几乎所有主流浏览器（如 Chrome、Firefox、Safari、Edge）都支持，但要注意不同浏览器可能会对某些错误处理行为有所不同。

总结

onerror 用于捕获资源加载错误或 JavaScript 运行时错误，可以通过设置相应的处理函数来进行错误处理或提供备用方案。