jQuery()の挙動を解読する(14) Event(2) Event API の解読──jQuery解読(25)

• 「jQuery解読によるJavascript学習」関連エントリイ一覧 in this Blog

jQuery Event 解読 contents
全てのエントリイが ver1.2.2 対応に改訂済みです。

1. Eventオブジェクトの抽象性と特定化・個別化の必要性
2. Event API の概要と $(args).eventtype() メソッド解読
3. $(args).bind()、$(args).one()、$(args).toggle()、$(args).hover() 解読
4. $.event クラスメソッドの概要と $.event.add()、$.data() 解読
5. $.event.handle()、$.event.fix() 解読
6. $(args).trigger()、$(args).triggerHandler()、$.event.trigger() 解読
7. $(args).unbind()、$.event.remove()、$.removeData() 解読
8. $(document).ready(f)、bindReady()、$.ready() 解読
9. $.event.special[t].setup()、$.event.special[t].mouseenter()、$.event.special[t].mouseleave() 解読 (t="type")──これらのメソッドは ver1.2.2 で追加された
10. 終わりに

何はともあれ、まず jQuery.js がイベントを処理する Event API のコードを順に解読してみようと思います。

そのためにまず以下に、event 関連コードの全容を自分なりに整理して外観します。

Event API の概要

Event API として次の９つが jQuery 本家サイトで説明／例示されています(順番は一部変更しました)。

言うまでもなくこれらは全てjQueryインスタンスメソッドであり、 $(args) にマッチした DOM エレメントに対して各メソッドがイベントを様々に処理します。

凡例 ：　args は引数、fn は関数、fn の後の数字は複数のfn を区別するための便宜上のサフィックスです。

なお、インスタンスメソッド内ではいくつかの $.event クラスメソッドが呼び出されます。そしてこれらのクラスメソッドこそ jQuery.js のイベント処理の根幹を為すものです。これらのクラスメソッドについては別のエントリイで解読することとします。

jQuery.js Event API コードの概要

　　　API　　─　　コードの概要（利用される Event 関連メソッド）
　　　※　API の概略機能

概要を示すためなので説明に記述した Javascript コードは敢えて文法に従っていません。

1. $(args).type(fn)─ fn ? this.bind(type,fn) : this.trigger(type)

   ※　type 名のイベントとイベントハンドラー関数 fn を $(args) に登録（bind）し、$(args)で指定した要素ノードで type イベントが発生した場合に fn を起動する。
   もし fn がなければ、既に登録済みのイベント「type」を起動する。

2. $(args).bind(type,data,fn)─ this.one(type,fn) 又は $.event.add(this, type ,fn , data)

   ※　type 名のイベント、data、fnハンドラー関数を $(args) に登録し、かつ $(args) でtypeイベントが発生した場合に、fn 関数を起動する。ここに data は event オブジェクトの data プロパティに渡される optional オブジェクトで fn を通じて付加的情報をイベントに追加できる。

3. $(args).one(type,data,fn)─ $.event.add(this, type, function(e){this.unbind(); this.fn}, data)

   ※　bind 同様に登録し、しかし１回だけの実行でそのイベントハンドラーを unbind する。

4. $(args).unbind(type,fn)─ $.event.remove(this.type,fn)

   ※　type 名のイベントとハンドラー関数の登録を $(args) から解除する

5. $(args).trigger(type,data,fn)─ $.event.trigger(type, data, this, true, fn)

   ※　$(args) に登録済みの type名 のイベントを optional data (配列)付きで 励起させる。またその際に fn 関数が記されていればこれも同時に起動させる。

6. $(args).triggerHandler(type,data,fn)─ $.event.trigger(type, data, this[0], false, fn)

   ※　1つの要素ノードに登録されたイベントハンドラー関数をブラウザの既定の動作を行わせずに起動させる。この際、 fn 関数が記されていればこれも同時に起動させる。

7. $(args).toggle(fn1,fn2)─ return (fn1 || fn2).apply(this.[e])

   ※　対象ノード $(args) に click イベントと２つのイベントハンドラー関数（ fn1,fn2 ）を登録し、対象ノードが click された時に、関数 fn1 と fn2 を交互に起動させる。

8. $(args).hover(fn1,fn2)
   　　─ return this.bind('mouseenter ,fn1).bind('mouseleave',fn2)

   ※　マウス Enter / Leave 時のハンドラー関数 fn1、fn2 を $(args) に登録し、
   併せてイベント発生時にそれらの関数を実行する。

9. $(args).ready(fn1)─ bindReady();
   　　document.fn1(jQuery) ||
   　　　$.readyList[].push(func(){return fn1.apply(this, [jQuery])});

   ※　DOMツリー読み込み完了時に fn1 関数を実行する。完了していなければ readrList 配列に fn1 関数を登録する。

ここに、これらのインスタンスメソッドは、おしなべてjQuery.fn.extend()メソッドで登録されてますので、全て jQuery.prototype プロパティに登録されます。その結果 jQuery.js の読み込みが完了した時点で、これらのメソッドの全ては「使用可能」となっています。

▲ToTop

$(args).eventtype() メソッド解読

このメソッドが jQuery.js のどこにあるのか、最初は戸惑いました。 jQuery.js のEvent 関連メソッドは add() から始まりますが、「捜索」してもなかなか「らしい」メソッドが登場しないのです。

そしてやっと見つかったと思っても、そのコードは大変複雑「怪奇」、難解です。何回（苦笑）眺めたか知れません。その何回も眺めた難解なコードは以下の通りです。

2344:jQuery.each( ("blur,focus,load,resize,scroll,unload,click,dblclick," +
2345: "mousedown,mouseup,mousemove,mouseover,mouseout,change,select," +
2346: "submit,keydown,keypress,keyup,error").split(","), function(i,name){
2347:
2348: // Handle event binding
2349: jQuery.fn[name] = function(f){
2350: return f ? this.bind(name, f) : this.trigger(name);
2351: };
2352:});

上の「個々のイベントタイプ名のメソッドを定義する」コードは次のような仕組みになっています。

• 2344行の ("blur から 1982 行の split(",") 迄は、イベントタイプ文字列を配列に納めるコードです。
• each() メソッドにより、この配列の個々の要素 name に対して function(i, name) が適用されます。(2348-2350行)
• その関数内では、第一に jQuery.fn つまり jQuery.prototype プロパティに name 、つまり個々のイベントタイプ名がプロパティとして登録されます。例えば blur イベントタイプの場合には、jQuery.prototype.blur となります。(2349行)。
• そして各イベントタイプ名のプロパティには、f をたった１つの引数とし、 f ? this.bind(name, f) : this.trigger(name) を返値とする無名関数がその値として付与されます。(2350行)
• この無銘関数は引数 f（ユーザーによる関数）があれば、this つまり所与のインスタンスのメソッドとして bind (name,f)を 実行してその結果を返し、他方、f がなければ this のメソッドとして trigger(name) を実行してその結果を返します。
• なお、eventtype() メソッドを prototype オブジェクトに登録することは重要な意味を持っています。jQuery.js の読み込み完了時点でそのメソッドが登録されるからです。

以上により、jQuery.js の読み込みが完了した時点で、jQuery(args).eventtype (fn) メソッドが定義されユーザーが自在に利用するだけの環境が用意されます。

イベント発生時の挙動を決めるコードは・・・

jQuery(args).eventtype (fn) メソッドは、目的の要素オブジェクトに目的のイベントタイプとそのイベントハンドラー関数を bind (登録) するだけではなく、登録された複数のイベントハンドラーを、それぞれのイベントの発生時に呼び出す機能を兼ねています。しかしそのコードはどこにあるのか、ということが次の課題となります。

この件は以後のエントリイで具体的に解明しますが、ここで簡単に結論を書いておきます。

1. jQuery(args).eventtype (fn) メソッド実行により、jQuery(args).bind()メソッドが呼び出され、そこから更に jQuery.event.add() メソッドが呼び出されます。
2. この add() メソッド内でお馴染みの addEventListner や attachEvent メソッドが実行され、それらのメソッドの引数として 地域変数 handle が渡されます。
3. 既に 地域変数 handle には add()メソッド内で jQuery.event.handle.apply(arguments.callee.elem, arguments) 又は false が代入されているので、イベント発生時にはこれが呼び出されます。(1936-1848行)
4. 呼び出されたこのメソッド内で fix() メソッドが呼び出されてクロスブラウザ対応が施され、かつ、既に登録済みでuuid番号と guid 番号によって特定可能なイベントハンドラー関数が呼び出され、実行されることにより目的が果たされます。