bind()よりlive()よりdelegate()が良いみたい

過去にこんな記事を書きました。

参考：[JavaScript][jQuery]onload後に構築した要素に対してイベントや関数が効かないときには
参考：[jQuery][JavaScript]jQuery.live()でhoverを実現したい場合は

で、live()すげー！と思ってたのですが、この度↓の記事を読みまして。

参考：The Difference Between jQuery’s .bind(), .live(), and .delegate() - Alfa Jango Blog

結論

以下に書いてるのは、画像のロールオーバーのスクリプトです。
AjaxでDOM構築後に追加した要素に対しても効きます。

// delegate() ver.
jQuery(document).delegate('img.hover', 'mouseenter', function(){
		jQuery(this).attr('src').replace(/^(.+)_off(\..+)$/, '$1_on$2');
});

jQuery(document).delegate('img.hover', 'mouseleave', function(){
		jQuery(this).attr('src').replace(/^(.+)_on(\..+)$/, '$1_off$2');
});

// live() ver.
/*
jQuery('img.hover').live({
	mouseenter: function(){
		jQuery(this).attr('src').replace(/^(.+)_off(\..+)$/, '$1_on$2');
	},
	mouseleave: function(){
		jQuery(this).attr('src').replace(/^(.+)_on(\..+)$/, '$1_off$2');
	}
});
*/

そのわけ

いわゆるイベントリスナの考え方だそうです。
詳しい説明は、冒頭の記事を読んでいただくとして・・。

• ホバーやったりクリックやったりの要素を監視する対象は、減らせるなら減らそう。
• イベントを発生させるのは、目的の要素に目的の動きがあった時だけにしよう。

上の例でのlive()だと、「hoverクラスを持つimg要素にマウスが乗っかる・離れる」を、ずーっと見張ってないといけません。
いつどこに要素があるかわからん恐怖！

反対にdelegate()だと、「最初のセレクタである程度範囲を絞る」ことができ、かつ「hoverクラスを持つimg要素にマウスが乗っかる・離れる」だけ見てれば良いと。

いやー、奥が深いわー。