デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

.error( )エラーが発生した時の処理を設定

構文

エラーが発生した時の処理を設定返値:jQueryオブジェクト
jQo.error( function )ver1.0〜
jQo.error( )ver1.0〜
jQo.error( object, function )ver1.4.3〜
※v1.8で非推奨となりました

機能

エラーが発生した時に引数のfunctionを実行します(エラーが生じる前に設定しておく必要があります)。また引数に何も設定しない場合は、要素に設定されたエラー時の処理を実行します。

ver1.4.3からは引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます(データはイベントオブジェクトのdataプロパティ経由で渡されます)。

errorメソッドはブラウザによって動作が異なる場合があります。完璧な処理を求めるのであれば、代わりにjavaScriptのwindow.onerrorを利用して対処してください。
そのためか、errorメソッドは非推奨となっています。→参考:本家ページの非推奨(deprecated)カテゴリ

解説

エラーが発生した時に実行する処理を設定

サンプル(error/01.html)を開いてbody内にimg要素とp要素があるのを確認してください。img要素のsrc属性には存在しない画像のリンクが設定してあるため画像が表示されません(つまりエラーです)。

<img src="noimage.jpg" width="100" height="100" alt="noimage" />
<p></p>

jQueryは以下の様に記述され、errorメソッドの引数にfunctionの「errorFunc」が設定されています。画像の読込を確認しているので、セレクタにimg要素を設定しています。

$(function () {
	$("img").error(errorFunc);
});

errorメソッドの引数に設定するFunctionは以下の様な構文になっています。まず引数(イベントオブジェクト)を受け取ります。そしてエラーが発生した時に実行したい処理を{}の中に書きます、何かをreturnする必要はありません。イベントオブジェクトは別項にまとめてあるので、そちらを確認してください。

errorに設定するFunctionの構文
function 任意の名前(イベントオブジェクト){
 エラーが発生した時に実行したい処理
}

サンプルerror/01.htmlで利用したerrorFuncは以下の様になっており、textメソッドを利用してp要素に「読込に失敗しました」と表示します。

function errorFunc(eo) {
	$("p").text("読込に失敗しました");
};

結果として、画像が読み込めずp要素に「読込に失敗しました」と表示されます。
イベントのfunction設定は、無名関数を利用することが多いです。→サンプル(error/01b.html

$("img").error(function (eo) {
	$("p").text("読込に失敗しました");
});

別のサンプルで確認

error/01.htmlとerror/01b.htmlでは、サンプルを開くとすでにエラーが出ている状態なので、errorイベントを実感しにくいと思います。ですので、buttonをクリックしてから画像を読み込むサンプルを作成しました。サンプル(error/02.html)を開いてbody内の要素を確認してください。error/01.htmlとは異なり、最初は存在する(エラーではない)画像が設定されています。そしてbutton要素が追加されています。

jQueryはerror/01b.htmlに以下の処理が追加され、buttonをクリックしたらattrメソッドを利用してimg要素のsrc属性を存在しない「noimage.jpg」に変更します。

$("button").click(function(){
	$("img").attr("src","noimage.jpg");	
});

ですのでbuttonをクリックすると存在しない画像を表示しようとしてエラーになりerrorイベントが発生します。その結果、p要素に「読込に失敗しました」と表示されます。

他の要素に設定されたエラー時の処理を実行する

errorメソッドは引数を設定しないと、要素に設定されたエラー時の処理を実行します。
サンプル(error/03.html)を開いてbody内の構成を確認してください。このサンプルではimg要素にきちんと正しいsrcが設定してあるので、エラーは発生しません。

続いてjQueryを確認してください。エラー時の処理はerror/01b.htmlと同じですが、以下の処理が追加されています。この処理によってbutton要素をクリックするとimg要素に設定されたエラー時の処理が実行されます。

$("button").click(function (){
	$("img").error();
})

結果として、button要素を「クリック」するとimg要素に設定したエラー時の処理が実行され、p要素に「読込に失敗しました」と表示されます。エラーの処理を確認するときに利用すると便利なのかもしれません。

objectオブジェクトをfunctionに渡す

第1引数にobjectオブジェクトを設定することで、実行するfunctionにデータを渡すことができます。データはイベントオブジェクトのdataプロパティを介して渡されます。サンプル(error/04.html)を開いてbody内の構成はerror/01b.htmlと同じ事を確認してください。

jQueryは以下の様に記述され、errorメソッドの第1引数にtestプロパティが10の値を持ったobjectオブジェクトが設定されています。このデータはイベントオブジェクト(eo)を通してfunctionに渡され、dataプロパティの値として取得できます。この値をtextメソッドを利用してp要素に表示します。

$("img").error({test:10}, function (eo) {
	$("p").text("受け取った値は→" +eo.data.test);
});

結果として、画像のsrc設定が間違っているためエラーが発生し、p要素に第1引数で渡されたtestプロパティの値「10」が表示されます。

メモ

引数にfunctionを設定しない構文について

本家サイトのerrorページでは引数に何も設定しない構文が紹介されていないのですが、サンプル(error/03.html)で紹介したとおり機能します。本当はやってはいけない構文なのでしょうか?