jQueryには何らかのエラーを検知した際に、イベントを発火させるerror()イベントがあります。例えば、ファイル読み込み時に存在しない画像を指定した場合にerrorイベントを発火させることができます。様々なイベントを学ぶことで制作の幅が広がるので、知識として身に付けていきましょう!
この記事では「jQueryのerrorイベントの使い方」について解説します。
- jQueryのerrorイベントの使い方
error()イベントの使い方
jQueryのerror()イベントは、エラーが発生したときにイベントが発火します。なお、.errorはjQuery1.8で非推奨となり、jQuery3.0で廃止となりました。
基本書式
$("要素").on("error", function(){
// エラーが発生したときに実行させたい処理内容
});
上の書式にコードを当てはめると次のようになります。
<div class="imgbox">
<img src="" alt="">
</div>
<button>click!</button>
$("button").click(function () {
$("img").on("error", function () {
console.log("画像が読み込まれませんでした");
}).attr("src", "dummy.png");
});
出力結果
ボタンをクリックすると、画像が存在しない場合はコンソール画面でエラーメッセージが出力されます。なお、imgタグに画像をセットしていなくても、プロジェクト内に画像をセットすれば画像が出力され、メッセージは出力されません。
まとめ
jQueryのerror()イベントは、エラーが発生したときにイベントを発火させたいときに便利です。2022年現在、.error()イベントは廃止となっています。もし使用する場合はon(‘error’)の形で記述しましょう。
jQueryのerror()イベントまとめ
error()
:エラーが発生したときにイベント発火.error()
はjQuery1.8で非推奨となり、jQuery3.0で廃止- error()イベントを使用する場合は、
on(‘error’)
の形式で記述する