イベントハンドラーの活用例

イベントハンドラーの活用例:

まえおき

今更なのですが、jQuery大好きなので、jQuery Advent Calendar 2013に参加したく、記事を書きました。ここ数年の間に便利なjavascriptフレームワークもたくさん出てきてjQueryは影が薄くなっているようですが、数多くの使い勝手の良いCSSフレームワークやCMSにはがっちり組み込まれているので、まだまだ必要な技術なんだなと思います。

今もBootstrap4を使ったコンテンツの開発をしているので、相変わらずjQueryは触り続けています。

今回は過去実装したイベントハンドラを使った小技（？）を書かせていただければと思っております。

背景

画像表示をする際に画像が全て揃っているかどうかわからない環境で画像がない時にはデフォルトの画像を表示したいときに実装した方法です。

サンプル

See the Pen
error sample by tomo (@tomoka)
on CodePen.

説明

errorEvent

今回の処理にerrorEventを使いました。

errorEventが発火する状態には色々な状態があります。その中で、画像がない時に404エラーが帰ってきます。

参考：HTMLImageElement
https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement#Errors

よって画像がない時は"Null"が帰ってきて自動的にエラーを取得できるので、404エラーが起こった時のみ、画像を差し替えるように設定しました。

実装方法

実装方法はイベントハンドラーであれば自動的に帰ってくるのでjQueryのon()に実装できます。

参考：.on()
http://api.jquery.com/on/

$(".itemPhoto").on("error",function(){ 
  console.log("画像がありません"); 
}) 

404エラーを出すsrcを持つimgにイベントを付けます。

もちろん、通常のイベントなので、同じように設定できます。

書き方は、いつもと一緒。

あとがき

まだまだjQuery書いてます。

イベントつながりで、最近、とても便利そうなjQuery Pluginを見つけました。
https://hammerjs.github.io/

APIに無いイベントの取得で過去にiOSとAndroidの検知の違いで苦労したことがあるため、Swipeを使いやすい形で実装できることに感動しました。（３本指のスワイプジェスチャー(MozSwipeGesture)ではなく１本指のSwipeに対応。）

書き方もこんな感じ。
http://hammerjs.github.io/getting-started/

var hammertime = new Hammer(myElement, myOptions); 
hammertime.on('pan', function(ev) { 
    console.log(ev); 
}); 

使えるようになるイベントも豊富。
http://hammerjs.github.io/touch-action/

まだまだ、見つけたばかりで、documentの読み込みもできていなし理解もしていないので、実装予定があるので、実装してみたら報告したいと思います。

最後まで読んでいただきありがとうございました。