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>
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>
document.getElementById( "sampleImg" ).onerror = function(){
document.getElementById( "sample2Output" ).innerHTML = "画像を読み込めませんでした。";
}
</script>