Window：错误事件

当资源加载失败或无法使用时，error 事件会在 Window 对象上触发，例如脚本执行错误。

语法

在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。

addEventListener("error", (event) => {});

onerror = (event, source, lineno, colno, error) => {};

注意：由于历史原因，window 上的 onerror 是唯一一个接收多个参数的事件处理程序属性。

事件类型

如果事件是由用户界面元素生成的，则事件对象是 ErrorEvent 实例；否则是 Event 实例。

使用说明

事件处理程序属性

由于历史原因，仅在 Window 对象上的 onerror 事件处理程序属性的行为与其他事件处理程序属性不同。

请注意，这仅适用于分配给 onerror 的处理程序，不适用于使用 addEventListener() 添加的处理程序。

取消

分配给事件处理程序属性的大多数事件处理程序可以通过从处理程序返回 false 来取消事件的默认行为

textarea.onkeydown = () => false;

但是，对于事件处理程序属性要取消 Window 的 error 事件的默认行为，它必须改为返回 true

window.onerror = () => true;

取消后，错误不会出现在控制台中，但当前脚本仍将停止执行。

参数

事件处理程序的签名在 addEventListener() 和 onerror 之间是不对称的。传递给 Window.addEventListener() 的事件处理程序接收单个 ErrorEvent 对象，而 onerror 处理程序接收五个参数，与 ErrorEvent 对象的属性匹配

事件: 包含描述问题的可读错误消息的字符串。与 ErrorEvent.message 相同。
源: 包含生成错误的脚本的 URL 的字符串。
行号: 包含发生错误的脚本文件的行号的整数。
列号: 包含发生错误的脚本文件的列号的整数。
错误: 抛出的错误。通常是 Error 对象。

window.onerror = (a, b, c, d, e) => {
  console.log(`message: ${a}`);
  console.log(`source: ${b}`);
  console.log(`lineno: ${c}`);
  console.log(`colno: ${d}`);
  console.log(`error: ${e}`);

  return true;
};

注意：这些参数名称可以通过 HTML 事件处理程序属性观察到，其中第一个参数称为 event 而不是 message。

此特殊行为仅发生在 window 上的 onerror 事件处理程序中。 Element.onerror 处理程序仍然接收单个 ErrorEvent 对象。

示例

实时示例

HTML

html

<div class="controls">
  <button id="script-error" type="button">Generate script error</button>
  <img class="bad-img" />
</div>

<div class="event-log">
  <label for="eventLog">Event log:</label>
  <textarea
    readonly
    class="event-log-contents"
    rows="8"
    cols="30"
    id="eventLog"></textarea>
</div>

body {
  display: grid;
  grid-template-areas: "control log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label,
button {
  display: block;
}

button {
  height: 2rem;
  margin: 0.5rem;
}

img {
  width: 0;
  height: 0;
}

JavaScript

const log = document.querySelector(".event-log-contents");

window.addEventListener("error", (event) => {
  log.textContent = `${log.textContent}${event.type}: ${event.message}\n`;
  console.log(event);
});

const scriptError = document.querySelector("#script-error");
scriptError.addEventListener("click", () => {
  const badCode = "const s;";
  eval(badCode);
});

结果

规范

规范
HTML 标准 # event-error
HTML 标准 # handler-onerror

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

Element 上此事件的目标：error 事件