Window: error イベント
error
イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合 — 例えば、スクリプトに実行エラーがあった場合に Window
オブジェクトに発生します。
構文
このイベント名を addEventListener()
等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。
addEventListener("error", (event) => {});
onerror = (event, source, lineno, colno, error) => {};
メモ: 歴史的な理由により、 window
の onerror
はイベントハンドラープロパティの中で唯一、複数の引数を受け取ります。
イベント型
イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は ErrorEvent
インスタンスであり、そうでない場合は Event
インスタンスです。
使用上の注意
イベントハンドラープロパティ
歴史的な理由から、 onerror
イベントハンドラープロパティは Window
オブジェクトに対してのみ、他のイベントハンドラープロパティとは異なる動作をします。
これは onerror
に割り当てられたハンドラーにのみ適用され、 addEventListener()
を使用して追加したハンドラーには適用されないことに注意してください。
キャンセル
イベントハンドラープロパティに割り当てられたほとんどのイベントハンドラーでは、ハンドラーから false
を返すことで、イベントの既定値の動作を取り消すことができます。
textarea.onkeydown = () => false;
しかし、 Window
の error
イベントの既定の動作をイベントハンドラープロパティから取り消すためには、代わりに true
を返す必要があります。
window.onerror = () => true;
取り消された場合、エラーはコンソールに現れませんが、現在のスクリプトの実行は停止します。
引数
イベントハンドラーのシグネチャは addEventListener()
と onerror
で異なります。 Window.addEventListener()
に渡されるイベントハンドラーは、単一の ErrorEvent
オブジェクトを受け取りますが、 onerror
ハンドラーは ErrorEvent
オブジェクトのプロパティと一致する 5 つの引数を受け取ります:
event
-
文字列で、関数を説明する人間が読むのに適したエラーメッセージが入ります。
ErrorEvent.message
と同じです。 source
-
文字列で、エラーが発生したスクリプトファイルの名前が入ります。
lineno
-
整数で、エラーが発生したスクリプトファイルの行番号が入ります。
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 イベントハンドラー属性で監視可能で、最初の引数は message
ではなく event
と呼ばれます。
この特別な動作は 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>
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);
});
結果
仕様書
Specification |
---|
HTML Standard # event-error |
HTML Standard # handler-onerror |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
Element
を対象としたこのイベント:error
イベント