jQuery1.3.2コードリーディング(liveメソッド)

若手ITゾンビにオンラインで参加した。
liveメソッドについては.live() | jQuery API Documentationを参照


liveでeventを貼って、実際にeventが発火した場合、
以下のliveHandlerが呼ばれる。
l2989-3012

function liveHandler( event ){
	var check = RegExp("(^|\\.)" + event.type + "(\\.|$)"),
		stop = true,
		elems = [];

	jQuery.each(jQuery.data(this, "events").live || [], function(i, fn){
		if ( check.test(fn.type) ) {
			var elem = jQuery(event.target).closest(fn.data)[0];
			if ( elem )
				elems.push({ elem: elem, fn: fn });
		}
	});

	elems.sort(function(a,b) {
		return jQuery.data(a.elem, "closest") - jQuery.data(b.elem, "closest");
	});
	
	jQuery.each(elems, function(){
		if ( this.fn.call(this.elem, event, this.fn.data) === false )
			return (stop = false);
	});

	return stop;
}

実際に動いたときにどこに何が入っているのか気になったので、

$('li').live('click',function(){return false;});

して、
liの中のaタグをclickした時どうなるかをFirebugで追ってみた。

thisがdocumentで、jQuery.data(this, "events").clickにliveHandlerが入っている事が分かる。
なのでどこをclickしてもとりあえずliveHandlerは呼ばれる。
この時のcheck変数に何が入っているかというのが↓である。

次に進む

fn.typeがclick.liなので、先ほどのcheck変数の正規表現とmatchする。
event.targetはclickしたa要素になっている。
fn.dataは'li'なので、

jQuery(event.target).closest(fn.data)[0]

jQuery(さっきclickしたa要素).closest('li')[0]

となり、さっきclickしたa要素から一番近い祖先のli要素になる。
なのでelemはli.mineになっている。
次に進む

liveメソッドで登録した関数をラップした関数が呼ばれる。