Window: error 事件

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

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

此事件仅针对同步抛出的脚本错误生成,例如在初始加载期间或事件处理程序内部。如果 Promise 被拒绝(包括 async function 中未捕获的 throw)并且没有附加拒绝处理程序,则会触发 unhandledrejection 事件。

语法

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

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

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

注意:出于历史原因,WindowWorkerGlobalScope 对象上的 onerror 是唯一接收多个参数的事件处理程序属性。

事件类型

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

Event ErrorEvent

描述

事件处理程序属性

出于历史原因,仅在 WindowWorkerGlobalScope 对象上的 onerror 事件处理程序属性与其他事件处理程序属性具有不同的行为。

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

取消

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

js
textarea.onkeydown = () => false;

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

js
window.onerror = () => true;

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

参数

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

message

一个包含描述问题的人类可读错误消息的字符串。与 ErrorEvent.message 相同。

注意:在 HTML 中,内容事件处理程序属性 <body> 元素上的 onerror 会将 error 事件监听器附加到 window不是 <body> 元素)。对于此事件处理程序,第一个参数称为 event,而不是 message,尽管它仍然包含一个字符串;也就是说,您将使用 <body onerror="console.error(event)"> 来记录错误消息。

source

一个包含生成错误的脚本 URL 的字符串。

行号

一个整数,包含发生错误的脚本文件的行号。

colno

一个整数,包含发生错误的脚本文件的列号。

error

被抛出的错误。通常是一个 Error 对象。

js
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>

JavaScript

js
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
# 事件-错误
HTML
# 处理程序-onerror

浏览器兼容性

另见