jQuery Conference で発表されたらしい、Douglas Neiner さんの Contextual jQuery 3 というスライドが興味深かったので、参考にしながらためしに画像ロールオーバー (マウスが乗っかると画像が差し替わるあれ) の jQuery プラグインを書いてみました。ワーク・イン・プログレス。
この手のスクリプトでよくあるのが、$(document).ready() のタイミングで各画像に .each() で処理をバインドするというやり方で、僕もその方法で書いたプラグインを使っていました。たとえば .rollover というクラスを持った画像を対象にする場合、だいたいこんな感じです:
$(document).ready(function () {
$('.rollover').each(function () {
...
$(this).bind({
mouseenter: function () {
// ロールオーバー処理
},
mouseleave: function () {
// デフォルトに戻す処理
}
});
});
});
しかし、このやり方だと .rollover が 100 個あれば 100 個の要素を検索して 100 回の初期化がおこなわれることになります。これを .on() を使って以下のように書き換え、1 回の初期化で済ますようにしました:
$(document).on('mouseenter mouseleave', '.rollover', function (event) {
...
if (event.type === 'mouseenter') {
// ロールオーバー処理
} else {
// デフォルトに戻す処理
}
});
ここでは説明のためかなり大雑把に書いていますが、基本的にこんな感じです。加えて、クラス名ではなく画像ファイル名の接尾辞によって要素を選択するようにしたり、mouseenter/mouseleave と同時に focusin/focusout も対象にしたり、ロールオーバー時の画像をプリロードして各画像に .data() で持たせたり、イベントを重複して登録しないようにチェックを入れたりとかしています。
jQuery のプラグインというといつも決まった書式でばかり書いていたので、なれない書き方でかなり苦労している上、いまいち内容に自信が持てませんが、個人的に苦手なイベント系の理解が少しだけ深まったような気がします。