onerrorイベント

onerrorイベント(エラーイベント)とは、ドキュメントや画像を読み込めず、エラーになった時のイベント。

構文

HTML

<element onerror="イベントハンドラ">

BODY要素

ドキュメントを読み込めずエラーになった時点にイベントハンドラを登録する場合。

<body onerror="イベントハンドラ">
IMG要素

画像を読み込めずエラーになった時点にイベントハンドラを登録する場合。

<img onerror="イベントハンドラ">

JavaScript

object.onerror = function(){ イベントハンドラ };

サンプル1

サンプル1について

HTMLドキュメント上でイベントハンドラを登録するタイプのサンプル。

サンプル1の動作について

存在しないファイルを指定してあるので、読み込めずにエラーとなり、「画像を読み込めませんでした。」と表示する。

サンプル1のソースコード

JavaScript

<script type="text/javascript">
function sample(){
    document.getElementById( "sample1Output" ).innerHTML = "画像を読み込めませんでした。";
};
</script>

HTML

<p><img onerror="sample()" src="sample.png" /><span id="sample1Output"></span></p>

サンプル2

サンプル2について

JavaScript上で動的にイベントハンドラを登録するタイプのサンプル。

このサンプルの場合、HTMLのIMG要素を、JavaScriptよりも先に書いておく必要がある。

サンプル2の動作について

存在しないファイルを指定してあるので、読み込めずにエラーとなり、「画像を読み込めませんでした。」と表示する。

サンプル2のソースコード

HTML

<p><img id="sampleImg" src="sample.png" /><span id="sample2Output"></span></p>

JavaScript

<script type="text/javascript">
document.getElementById( "sampleImg" ).onerror = function(){
    document.getElementById( "sample2Output" ).innerHTML = "画像を読み込めませんでした。";
}
</script>

スポンサード リンク

カテゴリー: DOM, JavaScript, その他のイベント, イベント, リファレンス パーマリンク