jQuery()の挙動を解読する(15) $(args).bind()、$(args).one()、$(args).toggle()、$(args).hover()──jQuery解読(26)

• 「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. 終わりに

$(args).bind() 解読【※ ver1.2.2で変更なし】

bind の第１引数の type は、ver1.2.2 から複数のイベント名の記述が可能となりました。しかし、bind() メソッドそのものに変化はありません。複数の type 名対応は add() メソッドで計られています。

bind() メソッドは $(args).eventtype(fn) メソッドから呼び出されますが、このメソッド単独でも意義のある活用が可能だと思います。殊に $(args).eventtype(fn) メソッドでは与えることの出来ない data オブジェクトを引数として与えられる点は bind() メソッドの単独利用を不可欠にしています。

さて、bind() メソッドのコードは極めて短いものですが、それは実質的な処理を jQuery.event.add()メソッドに委ねているからです。この後のエントリイで解説している add()メソッドを理解することが bind() メソッドを理解するためには不可欠となります。

ここでは、コードに沿って簡単に流れを解読することに留め、詳細は add() メソッド解読に委ねます。

　// 引数の data は JSON 形式のオブジェクトとして与えることが分かりやすいようです。
　/* イベントタイプが unload だったら one() メソッドを、そうでなかったら
　 * this＝$(args)の個々の要素ノードに対して、jQuery.event.add()メソッドを適用
　 * する。fn || data, fn && data では、興味深い論理演算子の使い方をしている。
　 * 第三引数は fn ? fn : ( data ? data : null) に等しく、
　 * 第四引数は fn ? data : null に等しくなる。
　 * これらの論理演算子の巧妙な使い方によって data や fn が与えられない場合に
　 * エラーが生じないようにしている。
　 */
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: },

data って何をするため？

それにしても第二引数の data は何をするために存在しているのか、最初は分かりませんでした。

本家サイトに拠れば、この data は object とされています。そして「Additional data passed to the event handler as event.data」──つまり、 event.data の値としてイベントハンドラーに付加されるものと説明されています。

しかし、本家サイトには実際に data を引数に取った例は示されていません。

そこで本家サイト内を探索し実例を見つけました。それは jQuery.js ver1.1.4 Release Note の中にありました。（この Release Note 内のjquery1.1.4.jsファイル内には沢山の実例が掲載されており、大変参考になります。）

第二引数 data を使った bind() メソッドの例───出典：jquery1.1.4.js

　// ハンドラー関数の中で event.data オブジェクトのfoo プロパティを引用
 function handler(event) {
   alert(event.data.foo);
 }
　// data として {foo: "bar"} を与えてクリックイベントとhandlerを bindする
 $("p").bind("click", {foo: "bar"}, handler)
　// 以上の結果、pタグをクリックすると、"bar" が alert される。

つまり、data 引数を使えば、何らかのイベント発生時に Javascript に行わせる行為に、任意の情報を渡すことが出来る、と言うことになります。

▲ToTop

$(args).one( type, data, fn ) 【※ ver1.2.2で変更なし】解読

このメソッドはバインドしたイベントハンドラー関数 fn を１回だけ駆動させ、当該頁がreLoad されるまでは二度と励起させない関数です。ボタンをクリックした際に Javascript に何かを行わせ、しかし二度目以降ののクリック時には何もさせない──そんな場合に重宝します。

　// 引数は bind() と同様です。
2190：one: function( type, data, fn ) {
　// this＝&(args) の各々の要素ノードに対して、関数を実行させ this を返す。
2191：　return this.each(function(){
　/* function(event) 関数を add() メソッドに渡す。
　 * この add() メソッドによって地域変数 handler に function(event){･･･}関数が
　 * 代入され、これが type イベント発生時のハンドラーとして bind（登録）される。
　 * さて、この handler 関数は type イベントが発生して実行される際に２つのこ
　 * とを行う。まず 2193 行により当該要素ノードから当該イベントの登録を抹消する。
　 * 次に 2194 行により fn または data 関数を実行する。
　 * ここに arguments は 2193 行より event となる。
　 */
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：},

なお、ここでも論理演算子を巧みに使って、data や fn がユーザーから与えられない場合のエラーを回避しています。

▲ToTop

$(args).toggle(fn1,fn2) 【※ ver1.2.2で変更なし】解読

これは同一の要素ノードに対して、クリック時に交互に起動する２つのイベントハンドラー関数を登録するメソッドです。

2217：toggle: function() {
2218：　// Save reference to arguments for access in closure
　　　　// クロージャーからアクセスするために地域変数に引数（２つのイベント
　　　　// ハンドラー関数）を代入
2219： 　var a = arguments;
2220：
　　　　 // クリックイベント発生時の挙動を履行させる。
2221： 　return this.click(function(e) {
　// this.lastToggle プロパティに、それが 0 ならば 1 を、さもなくば
　//（つまり 1 または未定義ならば）0 を代入する。
2222： 　　// Figure out which function to execute
2223： 　　this.lastToggle = 0 == this.lastToggle ? 1 : 0;
2224：
　/* clickイベントによるブラウザ固有の挙動を抑制する。
　 * なお、click()メソッド実行過程において、$.event.add()、$.event.handle()、
　 * $.event.fix() が実行済みなので、既にクロスブラウザ対応となっている。
　 * このため e.preventDefault() はクロスブラウザ対応のメソッドとなっている。
　 * この当たりのことは handle（）メソッドの解読で詳述する。
　 */
2225： 　　// Make sure that clicks stop
2226： 　　e.preventDefault();
2227：
　/* 1900行 の return とapply(this,･･･ により 1900 行の apply() メソッドが
　 * クロージャーとなる。つまり、次行により this.fn1(e) 又は this.fn2(e) が
　 * returnされ 更に1892行によってclick()メソッドが呼出し元である toggle() 
　 * メソッドに return されるが、地域変数 a に代入された fn1,fn2 の値は
　 * toggle()メソッド読み込み完了後も、次行のメソッドから参照出来る。
　 */
2228： 　　// and execute the function
2229： 　　return a[this.lastToggle].apply( this, [e] ) || false;
2230： 　});
2231： },

$(args).hover() 【※ ver1.2.2で変更あり】解読

このメソッドは $(args) 各ノードに対して２つのイベント（ mouseenter/mouseleave ）を一度に bind するものです。ver 1.2.1では同一名称のメソッドで mouseover/mouseout イベントを登録していましたが、1.2.2 では mouseenter/mouseleave に対応する内容に変更されました。

そもそも mouseenter/mouseleave は IE 固有のイベントであり、他のブラウザはサポートしていないはずです。ですからこれらのイベントに対応したということは、mouseover と mouseout だけでは IE で何らかの不都合が生じたため、敢えて mouseenter/mouseleave にも対応したのだと推測します。

コードを分析してみると、IEの場合には mouseenter/mouseleave 名のままでイベントを bind させており、他方でその他のブラウザでは、hover()メソッドは mouseover/mouseout 名のイベントを bind するようプログラムされています。つまり、hover() メソッドは IE の場合には mouseenter/mouseleave イベントを、その他の場合には mouseover/mouseout を扱うことになります。

さて、hover()メソッドは僅か３行でお仕舞いです。そして内容は極めて単純であり解読するまでもないでしょう。

具体的な hover メソッドの挙動解読は jQuery()の挙動を解読する(23) $.event.special オブジェクト ──jQuery解読(35) にて行います。

2233 hover: function(fnOver, fnOut) {
2234 　return this.bind('mouseenter', fnOver).bind('mouseleave', fnOut);
2235 },