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メソッドで登録した関数をラップした関数が呼ばれる。