jquery.jsを読み解く

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

2008年4月23日

山下英孝

今回もイベントの処理に関する部分の解説になります。$(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.

jquery.jsを読み解く

バックナンバー一覧

このエントリのトラックバック URI

お名前
メールアドレス
タイトル
コメント

多数の情報処理技術者試験対策書籍の発行実績を誇る技術評論社がお届けする，資格試験合格サイト「めざせ！情報処理試験パスサポ」が開設されました。

サクセスストーリーに続く，快適サーバー運用管理のヒント！: データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
gihyo.jp インフラエンジニア情報局: ネットワークやITにかかわるあらゆる業種で必要とされるインフラエンジニアに向けた技術情報や心構え，その魅力について多角的に紹介。
テストエンジニアステーション: いま，ITに関わるあらゆる開発業務で注目されつつあるテスト系エンジニアをターゲットにしたコンテンツサイトを展開します。

※検索はページ右上の検索ボックスをご利用ください。

もっと便利に！jQueryでラクラクサイト制作（実践サンプル付き）: 本連載では，実践サンプルとともに，jQueryを上手に活用してサイト制作の品質向上・効率化を実現するための実践テクニックを解説します。
サクセスストーリーに続く，快適サーバー運用管理のヒント！: サーバーを自社で運用管理するのはもう限界…。データの増大，煩雑な管理，システムダウン，セキュリティなど，迫りくる課題からシステム管理者の負担を軽くするポイントを解説します。
続・先取り！ Google Chrome Extensions: 2010年1月のリリースが予定されているGoogle Chrome 4に搭載されるExtensionsについて，その詳細を先取りで解説します。最新情報から，ユーザースクリプトやテーマの作り方など関連情報もお届けします。
モダンPerlの世界へようこそ: この連載では，Perlの世代間ギャップに悩んでいる方に，いくらかの背景知識と，これだけは知っておいたほうがよいという最低限の慣用句をお届けします。
Hosting Department：ホスティングを活用するための基礎知識: 本連載では，ホスティングサービスを活用する上で知っておきたい基礎知識を解説します。
Blogopolisから学ぶ計算幾何: 計算幾何学は，図形に関するアルゴリズムを研究するコンピュータサイエンスの一分野です。本連載では，ビジュアルブログ検索エンジン「Blogopolis」で採用されている計算幾何のアプローチを例に取り上げながら，計算幾何の初歩を実践的に学習します。
Windows phoneアプリケーション開発入門: Windows Marcketplace for Mobileがサービス開始され，作成したアプリケーションを個人でも世界をターゲットに公開できる環境が整ってきました。これを機にWindows phoneアプリケーションの開発をしてみませんか？
いま，見ておきたいウェブサイト: この連載では，国内外の最新のウェブサイトを隔週更新で取り上げ，これら最新サイトの特徴や素晴らしい部分を，さまざまな角度から解説していきます。