jquery.jsを読み解く

第10回　jQueryライブラリ（2183行目～2364行目）

この記事を読むのに必要な時間：およそ 6 分

今回もイベントの処理に関する部分の解説になります。$(document).ready()を実装している部分が出てきますが，ここのソースコードは非常に興味深いです。よくある実装方法としては，動的にscriptタグを挿入してJavaScriptコードを実行する方法がありますが，jQueryの実装はもっと複雑なものです。また，DOMContentLoadedを利用して，処理の開始をできるだけ早くして，ユーザの体感速度を向上するための工夫も大変参考になります。

それでは，順に見ていきましょう。

jQuery.fn.bind()

2183: jQuery.fn.extend({
2184:   bind: function( type, data, fn ) {
2185:     return type == "unload" ? this.one(type, data, fn) : this.each(function(){
2186:       jQuery.event.add( this, type, fn || data, fn && data );
2187:     });
2188:   },
2189:

jQuery.fn.bind()メソッドは，現在選択されている要素にイベントを割り当てます。ここで，第一引数のtypeには，"click"，"mouseover"などのイベント種別が渡されてきます。また，第二引数のdataには，イベントハンドラに引き継ぐデータが渡されてきます。最後に，第3引数のfnがイベントハンドラ関数になります。

2185行目で，unloadイベントの場合のみone()メソッドを呼び出し，それ以外の場合は1804行目（第8回参照）のjQuery.evnet.add()メソッドに処理を引き継ぎます。

jQuery.fn.one()

2190:   one: function( type, data, fn ) {
2191:     return this.each(function(){
2192:       jQuery.event.add( this, type, function(event) {
2193:         jQuery(this).unbind(event);
2194:         return (fn || data).apply( this, arguments);
2195:       }, fn && data);
2196:     });
2197:   },
2198:

jQuery.fn.one()メソッドは，引数のイベントハンドラ関数fnを1回だけ実行するように割り当てます。

2192行目でjQuery.event.add()メソッドを呼び出すのは先ほどのbind()メソッドと同様ですが，2193行目でハンドラ関数の前にunbind()によってイベントを解除するように設定しているところが違います。

jQuery.fn.unbind()

2199:   unbind: function( type, fn ) {
2200:     return this.each(function(){
2201:       jQuery.event.remove( this, type, fn );
2202:     });
2203:   },
2204:

jQuery.fn.unbind()メソッドは，登録されているイベントを解除します。実際の処理は，2201行目で呼び出しているjQuery.event.remove()メソッドによって実行されます。

jQuery.fn.trigger()

2205:   trigger: function( type, data, fn ) {
2206:     return this.each(function(){
2207:       jQuery.event.trigger( type, data, this, true, fn );
2208:     });
2209:   },
2210:

jQuery.fn.trigger()メソッドは，jQuery.event.trigger()メソッドのラッパーです。2207行目で，各要素に指定されたイベントを実行します。

jQuery.fn.triggerHandler()

2211:   triggerHandler: function( type, data, fn ) {
2212:     if ( this[0] )
2213:       return jQuery.event.trigger( type, data, this[0], false, fn );
2214:     return undefined;
2215:   },
2216:

jQuery.fn.triggerHandler()メソッドも，指定されたイベントを実行するのですが，ブラウザ標準のアクションを実行しないところが違います。このため，2213行目でjQuery.event.trigger()メソッドを呼び出す際に第4引数としてfalseを指定します。

著者プロフィール

山下英孝（やましたひでたか）

大学を卒業後，大手SIerに就職し，電機メーカーの研究所勤務を経て，ウノウに入社。1年半に渡ってWebサイトの開発，ディレクション，運用を経験した後に独立。2008年2月よりフリーエンジニアとして活動中。好きな言語はJavaScriptとPythonで，Linuxサーバ運用管理も得意。

ブログ：Weboo! Returns.