このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
Window: error イベント
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
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> <button type="button">Generate script error</button> <img /></div><div> <label for="eventLog">Event log:</label> <textarea readonly rows="8" cols="30" ></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;}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 # event-error |
| HTML # handler-onerror |
ブラウザーの互換性
関連情報
Elementを対象としたこのイベント:errorイベント