JQueryのイベント実行の仕組みを調べてみた

JQueryでのイベントリスナーの設定、実行までがどんな仕組みになっているのかが気になったので調べてみました。

今回参考にしたのはjquery-1.7.1.jsです。

まずJQuery自体の定義ですが、無名関数スコープ内で定義されていて、それをwindowオブジェクトに追加することで定義されています。

(function( window, undefined ) {

// Use the correct document accordingly with window argument (sandbox)
var document = window.document,
var jQuery = (function() {
・・・・
window.jQuery = window.$ = jQuery;
・・・・
})( window );

JQueryとJQuery.fn

JQueryにはstaticな機能が定義されている。
拡張するには JQuery.extend({ 拡張内容 });

JQuery.fnはJQueryオブジェクトのプロトタイプ。
（セレクタで生成したJQueryオブジェクトに振る舞いを追加するイメージ）
拡張するには JQuery.fn.extend({ 拡張内容 });

イベント処理

イベントに関する処理は JQuery.event に定義されている。
よく使うJQuery.fn.bind は下記のようになっていて、JQuery.fn.onで各HTmlエレメントに対して、JQuery.event.add を実行している。

bind: function( types, data, fn ) {
	return this.on( types, null, data, fn );
}

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
・・・・
return this.each( function() {
	jQuery.event.add( this, types, fn, data, selector );
});

JQuery.event.addでは、HtmlエレメントにjQuery.event.dispatchを実行するだけのイベントハンドラを設定し、
Htmlエレメントに events オブジェクトを設定し、events[イベントタイプ]の配列にイベントハンドラ等のデータが入ったオブジェクトをpushします。

JQuery.event.dispatchで、Htmlエレメントに紐づいたeventsデータから実行されたイベントタイプのイベントハンドラ情報を取得し、順に実行していきます。

JSXでJQueryのようにHtmlエレメントを内包したオブジェクトにどうやってイベントハンドラを設定しようか？と考えたのをきっかけにJQueryのイベント処理を見てみましたが、よくできていますね。