Window: error 事件
当资源加载失败或无法使用时(例如脚本执行错误),会在 Window 对象上触发 error 事件。
此事件仅针对同步抛出的脚本错误生成,例如在初始加载期间或事件处理程序内部。如果 Promise 被拒绝(包括 async function 中未捕获的 throw)并且没有附加拒绝处理程序,则会触发 unhandledrejection 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称,或设置事件处理程序属性。
addEventListener("error", (event) => { })
onerror = (message, source, lineno, colno, error) => { }
注意:出于历史原因,Window 和 WorkerGlobalScope 对象上的 onerror 是唯一接收多个参数的事件处理程序属性。
事件类型
如果事件对象是由用户界面元素生成的,则它是 ErrorEvent 实例,否则它是 Event 实例。
描述
事件处理程序属性
出于历史原因,仅在 Window 和 WorkerGlobalScope 对象上的 onerror 事件处理程序属性与其他事件处理程序属性具有不同的行为。
请注意,这仅适用于分配给 onerror 的处理程序,而不适用于使用 addEventListener() 添加的处理程序。
取消
大多数分配给事件处理程序属性的事件处理程序可以通过从处理程序返回 false 来取消事件的默认行为
textarea.onkeydown = () => false;
但是,对于事件处理程序属性要取消 Window 的 error 事件的默认行为,它必须返回 true
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对象。
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
<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
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 |
浏览器兼容性
加载中…
另见
Element上的此事件的目标:error事件Window:unhandledrejection事件