HTMLElement: error イベント
error イベントは、リソースの読み取りに失敗したり、使用できなかったりした場合に要素に発生します。例えば、スクリプトの実行エラーがあったり、画像が見つからないか無効であった場合などです。
このイベントはキャンセル不可で、バブリングしません。
構文
このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかします。
js
addEventListener("error", (event) => {}); onerror = (event) => {}; イベント型
イベントオブジェクトは、ユーザーインターフェイス要素から生成された場合は UIEvent のインスタンスとなり、それ以外の場合は Event となります。
例
ライブデモ
HTML
html
<div class="controls"> <button id="img-error" type="button">Generate image 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"); const badImg = document.querySelector(".bad-img"); badImg.addEventListener("error", (event) => { log.textContent += `${event.type}: Loading image\n`; console.log(event); }); const imgError = document.querySelector("#img-error"); imgError.addEventListener("click", () => { badImg.setAttribute("src", "i-dont-exist"); }); 結果
仕様書
| Specification |
|---|
| UI Events # event-type-error |
| HTML # event-error |