HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

【初心者向け】HTMLのonerrorイベント属性の使い方を徹底解説

onerrorイベント属性とは？

HTMLのonerrorイベント属性は、HTMLドキュメント内で外部ファイル（画像やスクリプトなど）を読み込む際にエラーが発生したときにトリガーされるイベントハンドラです。

例えば、<img>タグで指定した画像ファイルが存在しない場合や、パスの指定を間違えた場合などに、このonerrorイベントが発火します。エラー発生時に代替画像を表示したり、ユーザーへ通知したりする処理を組み込むことで、より堅牢なWebページを構築できます。

なお、onerror属性は主に<img>、<script>、<link>などの外部リソースを読み込む要素で利用できます。

構文

onerrorイベント属性の基本的な構文は以下の通りです。

<tagname onerror="script">コンテンツ</tagname>

タグ名の箇所には対象となる要素を指定し、「script」の部分にはエラー発生時に実行したいJavaScriptのコードまたは関数名を記述します。

サンプルコード

それでは、実際にHTML onerrorイベント属性を使用した具体例を見ていきましょう。以下のサンプルでは、ボタンをクリックすると意図的に存在しない画像を読み込む<img>要素を生成し、エラー発生時に背景色を変更しています。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
        text-align: center;
        padding: 20px;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
</style>
</head>
<body>
<h1>HTML onerrorイベント属性のデモ</h1>
<button onclick="add()" class="btn">自然の画像を追加</button>
<script>
    function add() {
        var imgEle = document.createElement('IMG');
        imgEle.setAttribute("src", "nature.png");
        imgEle.setAttribute("alt", "nature image");
        imgEle.setAttribute("onerror", "errorFn()");
        document.body.appendChild(imgEle);
    }
    function errorFn() {
        document.body.style.background = "linear-gradient(45deg, #8BC6EC 0%, #9599E2 100%) no-repeat";
        document.body.style.color = "#fff";
    }
</script>
</body>
</html>

コードの解説

  • add()関数：document.createElement()を使って新しい<img>要素を作成し、あえて存在しない画像ファイル「nature.png」をsrc属性に指定します。さらに、onerror属性にerrorFn()関数を設定してから、body要素に追加しています。
  • errorFn()関数：画像の読み込みに失敗すると自動的に呼び出され、ページの背景グラデーションと文字色を変更します。

実行結果

ブラウザで上記のコードを実行すると、以下のような画面が表示されます。

【初心者向け】HTMLのonerrorイベント属性の使い方を徹底解説

「自然の画像を追加」ボタンをクリックすると、誤ったsrc属性とonerrorイベント属性を持つ画像要素が生成され、body要素に追加されます。

【初心者向け】HTMLのonerrorイベント属性の使い方を徹底解説

指定された画像ファイルが存在しないため読み込みエラーが発生し、onerrorイベントによってerrorFn()が実行され、背景色が変化することが確認できます。

まとめ

onerrorイベント属性を使えば、外部リソースの読み込み失敗を検知して適切な代替処理を行うことができます。画像が見つからない場合のフォールバック表示や、エラーログの記録など、ユーザー体験を損なわないための重要な仕組みとして、ぜひ活用してみてください。

  1. HTMLのondragleaveイベント属性とは？使い方とサンプルコードを解説

    HTMLのondragleaveイベント属性は、ドラッグ可能な要素やテキストが、HTMLドキュメント内の有効なドロップターゲット（ドロップ先）から離れた瞬間に発生するイベントです。ドラッグ＆ドロップ操作では、要素がドロップゾーンに入ったときに発生するondragenterと対になるイベントであり、両者を組み合わせることで、ユーザーにとって分かりやすい視覚的フィードバックを実現できます。 構文 ondragleaveイベント属性の基本的な構文は以下のとおりです。 <tagname ondragleave=”script”></tagname>

  2. HTMLのondragenterイベント属性とは？構文と使い方をサンプルコード付きで解説

    HTMLのondragenterイベント属性は、ドラッグ可能な要素やテキストが、ドキュメント内の有効なドロップターゲット（ドロップ先）に入った瞬間に発生するイベントです。ドラッグ＆ドロップ操作のUIを作成する際に、ドロップ領域をハイライト表示するなど、ユーザーへの視覚的なフィードバックを提供したい場合によく活用されます。構文（Syntax）ondragenterイベント属性の基本的な書き方は以下のとおりです。<tagname ondragenter="script"></tagname>対象となるタグの属性として「ondragenter」を指定し、値