jQuery()の挙動を解読する(23) $.event.special オブジェクト ──jQuery解読(35)

• 「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.event.special オブジェクトの働き

special オブジェクトは bind( elem ,fn ) 又は unbind( elem ,fn ) メソッドを使って、reaady、maouenter 及び mouseleave イベントタイプとそのハンドラー関数を elem に登録し、あるいはこれを解除する為に ver1.2.2 で新設されました。それは、(un)bind('ready',fn)、(un)bind('mouseenter', fn) 又は (un)bind('mouseleave', fn) の６つのインスタンスメソッドが起動された場合にだけ、jQuery.event.add() 又は jQuery.event.remove() メソッド内で呼び出されます。

special オブジェクトは ready、mouseenter 及び mouseleave の３つのプロパティを持っています。ready は setup と teardown の２つの関数オブジェクトで構成され、他の２つのプロパティは setup、teardown 及び handler の３つの関数オブジェクトから構成されています。（下図参照）

　special = {
　　ready      : { setup : fn11, teardown : fn12 },
　　mouseenter : { setup : fn21, teardown ; fn22, handler : fn23 },
　　mouseenter : { setup : fn31, teardown ; fn32, handler : fn33 }
　}

ここに、それぞれの関数の役割は setup はイベントの登録用、teardown は登録済みイベント解除用、handler は各タイプのイベントに対するハンドラー関数です。

hover()メソッドと mouseover/out イベント、そしてIEへの「配慮」？

hover()メソッドは jQuery ver1.2.1 では mouseover/out イベントを扱うためのトグルメソッドでした。ところが、1.2.2 ではコードを一見すると hover()メソッドは、mouseenter/leave を扱うように変更されたように見えます。mouseover/out は hover()メソッドから切り離されてしまったような印象を受けます。

しかし、コードを詳細に見てみるとそうではないことが直ぐに分かります。hover()メソッドは IE においては mouseenter/leave イベントをサポートし、その他のブラウザにおいては mouseover/out イベントを扱うように拡張されたのです。

この拡張が何故もたらされたか、その理由は判然としませんが、過去の hover() にバグはないようですから、市場占有率が相変わらず高い IE に配慮したと理解すればよいのかも知れません。mouseenter/leave イベントが IE だけのイベントであって他のブラウザでは存在しないのに、敢えてこれらのイベントをサポートする理由は、まだ IE を無視する訳にはいかないためとしか考えられません。

関連して、それでは $(args).eventtype() 形式のイベント発動メソッドにおいて、eventtype として利用できるイベントの種類はどう変わったのか確認してみました。すると、こちらは 1.2.1 と 1.2.2 で全く同一でした。つまり、mouseenter/leave イベントは hover() メソッドだけで利用可能なのに対して、mouseover/out イベントは hover() メソッドでの利用だけではなく、それぞれを単独で利用することも想定した仕様となっています。

勿論、bind メソッドを使って mouseenter/leave イベントを単独使用することは可能でしょうが、IE だけでしか動かないコードを作る意味はありません。

▲ToTop

jQuery.event.special["type"]["setup/teardown/handler"]()メソッドの解読

specialオブジェクトは、jQuery.evemt.add() メソッド又は jQuery.evemt.remove() メソッドから呼ばれます。前者は当該イベントをバインドする際に、後者はそのイベントの登録を解除する時に、です。

type == ready の時

special.ready["･･･"]() メソッドのコードを表示／隠蔽する

2126: special: {
2127: 　ready: {
2128: 　　setup: function() {
2129: 　　　// Make sure the ready event is setup
2130: 　　　bindReady();
2131: 　　　return;
2132: 　　},
2133:
2134: 　　teardown: function() { return; }
2135: 　},
2136:

• jQuery.event.special.ready.setup()

  1. $(document).bind("ready",fn) メソッドが起動されると、add()メソッドを介して special.ready.setup() メソッドが呼び出されます。この special.ready.setup() は bindReady() メソッドを呼び出して、 jQuery.ready() メソッドを DOM 読み込み完了イベントハンドラーとして登録し、DOM 読み込み完了後にこれを起動させます。
     しかし、これらの動きのどこにも第２引数の fn 関数が登場しません。正確に言えば jQuery.ready() メソッドの最後の行に至って初めて fn が起動されます。jQuery(document).triggerHandler("ready");　です。これにより fn 関数が起動されます。
  2. 次に、special.ready()メソッドの最後（2131行）には返値なしの return がありますから、未定義値が呼出し元に返されます。この結果 1875-1878 行の Listner 等のバインダー関数は起動されません。

• jQuery.event.special.ready.teardown()

  これは単に未定義値を return するだけです。何もしません。呼出し元に戻った際には return により返された undefined は !== false ですから、1875-1878 行の Listner 等のバインダー関数は起動されません。

▲ToTop

type == mouseenter の時

special.mouseenter["･･･"]() メソッドのコードを表示／隠蔽する

2137: 　mouseenter: {
2138: 　　setup: function() {
2139: 　　　if ( jQuery.browser.msie ) return false;
2140: 　　　jQuery(this).bind("mouseover", jQuery.event.special.mouseenter.handler);
2141: 　　　return true;
2142: 　　},
2143:
2144: 　　teardown: function() {
2145: 　　　if ( jQuery.browser.msie ) return false;
2146: 　　　jQuery(this).unbind("mouseover", jQuery.event.special.mouseenter.handler);
2147: 　　　return true;
2148: 　　},
2149:
2150: 　　handler: function(event) {
2151: 　　　// If we actually just moused on to a sub-element, ignore it
2152: 　　　if ( withinElement(event, this) ) return true;
2153: 　　　// Execute the right handlers by setting the event type to mouseenter
2154: 　　　arguments[0].type = "mouseenter";
2155: 　　　return jQuery.event.handle.apply(this, arguments);
2156: 　　}
2157: 　},
2158:

• jQuery.event.special.mouseenter.setup()

  1. IE の場合、何もせずに呼出し元に false を return します。この結果 attachEvent() メソッド（ 1878 行 ）が実行されます。
  2. IE 以外のブラウザの場合、イベントタイプ名を mouseover に変え、ハンドラー関数にjQuery.event.special.mouseenter.handler を指定して bind()メソッドを再帰呼び出しします。
     再帰呼び出しされた bind() メソッドによって、更に add() メソッドも再帰呼び出しされ、その中で mouseover名の jQuery.event.special.mouseenter.handler を関数とするイベントがバインドされます。そして実は、この moueenter.handler 関数には、mouseenterイベント名と連動している fn 関数が入るようになっています。こうして、mouseenter 名で登録された fn ハンドラー関数が、mouseover 名のハンドラー関数として機能することになります。
     それが終わると再帰先から呼出し元の 2140 行に戻りますが、2141 行で true を return させることにより、呼出し元で再び addEventListner ()メソッドが実行させることはありません。

• jQuery.event.special.mouseenter.teardown()

  1. IE の場合、何もせずに呼出し元に false を return します。この結果 detachEvent() メソッド（ 1942 行 ）が実行されます。
  2. IE 以外のブラウザの場合、イベントタイプ名を mouseover に変え、ハンドラー関数にjQuery.event.special.mouseenter.handler を指定して unbind()メソッドを再帰呼び出しします。
     再帰呼び出しされた unbind() メソッドによって、更に remove() メソッドも再帰呼び出しされ、その中で mouseover名の jQuery.event.special.mouseenter.handler を関数とするイベントがアンバインド（ removeEventistner() メソッド起動 ）されます。
     その後再帰先から呼出し元の 2146 行に戻った後には 2147行で true を return させることにより、呼出し元で再び removeEventistner() メソッドを実行させることはありません。

• jQuery.event.special.mouseenter.handler()

  ※　この関数は IE からは呼び出されません。

  1. 内包されている要素にマウスが移動した時に、mouseout したとブラウザに判断させないために、withinElement 関数を起動させて、要素の「先祖/子孫」関係をチェックさせます。内包されている要素内にマウスがある場合には新たにイベントを発生させません。
  2. event.typeプロパティ値を mouseenter に戻した上で、mouseenter 名で登録されているイベントハンドラー関数がイベントハンドラー関数となるようにセットします。

上の説明ではもちろんのこと、special["type"].setup()メソッドは大変分かりにくいので、IE 以外のブラウザで mouseenter イベントをバインドする時の、スクリプトの進行過程を辿るフローチャート的資料を作ってみましたので、以下に掲載します。

左図をクリックすると原寸画像が別窓で開きます。mouseenter イベントタイプ名から、どのようにして mouseover イベントの登録に至るのか、その経過を分かりやすく説明したつもりです。

▲ToTop

type == mouseleave の時

special.mouseleave["･･･"]() メソッドのコードを表示／隠蔽する

2159: 　mouseleave: {
2160: 　　setup: function() {
2161: 　　　if ( jQuery.browser.msie ) return false;
2162: 　　　jQuery(this).bind("mouseout", jQuery.event.special.mouseleave.handler);
2163: 　　　return true;
2164: 　　},
2165:
2166: 　　teardown: function() {
2167: 　　　if ( jQuery.browser.msie ) return false;
2168: 　　　jQuery(this).unbind("mouseout", jQuery.event.special.mouseleave.handler);
2169: 　　　return true;
2170: 　　},
2171:
2172: 　　handler: function(event) {
2173: 　　　// If we actually just moused on to a sub-element, ignore it
2174: 　　　if ( withinElement(event, this) ) return true;
2175: 　　　// Execute the right handlers by setting the event type to mouseleave
2176: 　　　arguments[0].type = "mouseleave";
2177: 　　　return jQuery.event.handle.apply(this, arguments);
2178: 　　}
2179: 　}
2180: }

mouseleave が mouseout に、jQuery.event.special.mouseenter.handler が jQuery.event.special.mouseleave.handler に変わる以外は、上の mouseenter の場合と全く同様ですので記述を省略します。

jQuery.event.special ["type"] の難解さについて

上に見たように、special オブジェクトはまさに「 特別に 」難解です。

特に type 名が mouseenter/leaveの場合の setup/teardown メソッドは、bind メソッドと add メソッドの再帰呼び出しを含み、しかも途中でイベント名を変更しつつ、ブラウザ毎に不必要なイベントは登録しないという「 裏技的 」技法を用いて mouseover/out イベントにも同時対応させており、難解を極めます。

このエントリイ作成に当たり、沢山の時間を要してコード進行を図示したり、何度も FireBug で追跡したり、色々チャレンジしてやっと「 理解できた 」のですが、この一連の Event 関連コード解読作業において、この箇所が最も苦労させられました。

上の記述でこれらの挙動を的確に表現できた自信はありませんし、読むだけで分かる表現になっているとも思えません。（書いておきながら、失礼なことですが...）

本来、もっと分かりやすい説明・解読文章を書ければ、と悔やまれます。

'eType'は 'mouseenter' 又は 'mouseleave' を表すものとします。 'fType'は 'mouseover' 又は 'mouseout' を表すものとします。 gn は $.event.special['eType'].handler メソッドを表します。 　$(elem).bind('eType',fn) 　 → add( elem, 'eType', fn ) 　　　 → $.event.special['eType'].setup.call(elem) 　　　　　 → $(elem).bind( 'fType', gn) 　　　　　　　 → add( elem, 'fType', gn ) jQuery.event.handle には special オブジェクトが呼び出されるより前の段階で、fn が登録されている。 そして gn では、add() メソッドによって既に登録されたこの fn を呼び出している。 例えば、既に jsファイルの読み込みが終わり、&(fn(){})が実行されてイベントのバインドを行う場合の、mouseenterイベントのバインド過程を綴ってみます。 >>> console.log(jQuery.cache[2]["events"]["mouseenter"][3].toString()) function () { $(this).css("background-color", "white"); } >>> console.log(jQuery.cache[2]["events"]["mouseover"][4].toString()) function (event) { if (withinElement(event, this)) { return true; } arguments[0].type = "mouseenter"; return jQuery.event.handle.apply(this, arguments); }