jQuery実装原理のシミュレーションコード-3 イベントハンドリング_jquery

オブジェクトのプライベート拡張オブジェクトには、events という名前のイベント管理オブジェクトが特別に追加されます。このオブジェクトの各イベントは、同じ名前の属性に対応します。この属性の値は配列になります。シーケンスをこの配列に追加して、イベント ハンドラーのリストを形成します。カスタム イベント処理関数がこのリストにプッシュされます。

イベントがトリガーされると、登録された匿名関数を通じて jQuery.event.handle が実行されます。クロージャが使用されるため、この関数の this はイベント ソース オブジェクトを通じて見つかります。 .プライベート拡張データを取得し、イベント内で対応するイベント ハンドラー リストを見つけて、最後にそれらを順番に実行します。

コードをコピー コードは次のとおりです:

///
// #2076
// イベント ハンドラー関数
jQuery の生成に使用される ID。 guid = 1;
//jQuery のイベント オブジェクト
jQuery.event = { // # 1555
// オブジェクトにイベントを追加します
// elem はイベントの要素を追加します。タイプはイベント名、ハンドラー イベントハンドラー、データ イベント関連データ
add: function (elem, type, handler, data) {
var handleObjIn, handleObj>// 関数に一意の ID
if ( !handler.guid) {
handler.guid = jQuery.guid;
}
// この要素に対応するキャッシュ データ オブジェクトを取得します
var elemData = jQuery。 data(elem);
//すべてのイベントに共通の要素とハンドラーに対応するキャッシュ オブジェクトのイベント オブジェクトを取得します。
var events = elemData.events = elemData.events {}; vareventHandle = elemData.handle;
//イベント処理関数ハンドルがすでに 1 つしかない場合は、jQuery.event.handle が使用されます。
//この関数はクロージャーを使用して、現在のイベント オブジェクトとパラメーターを参照します。 。
if (!eventHandle) {
elemData.handle =eventHandle = function () {
return jQuery.event.handle.apply(eventHandle.elem, argument)
};
// クロージャ ハンドラーがイベント ソース オブジェクトを検索できるようにします。
eventHandle.elem = elem;
//
handleObj = { handler: handler, data: data}; = "";

handleObj.type = type;
handleObj.guid = handler.guid;
// 各イベントには配列
var の形式で一連のハンドラーを含めることができます。 handlers = events[type],
special = jQuery.event.special[type] {}
// イベント ハンドラー キューを初期化します
if (!handlers) {
handlers = events [type ] = [];
// 特殊なイベント ハンドラーを確認します
// 特殊なイベント ハンドラーが false を返す場合のみ addEventListener/attachEvent を使用します
// 実際のイベントの登録を完了します
//実際のイベント処理関数はeventHandleです。
if (!special.setup ||special.setup.call(elem, data, namespaces,eventHandle) === false) {
//要素へのグローバル イベント ハンドラー
if (elem.addEventListener) {
elem.addEventListener(type,eventHandle, false);
} else if (elem.attachEvent) {
elem.attachEvent(" on" type,eventHandle);
}
}
}
// カスタム ハンドラー関数はスタック内にあり、後で jQuery.event.handle が実際のハンドラー
ハンドラーをここで見つけます。 .push(handleObj);
// IE でのメモリ リークを防ぐために elem を無効化します。
},
global: {},
// リアル イベント ハンドラー関数,
// return jQuery.event.handle.apply(eventHandle.elem, argument) で呼び出されるので
// したがって、この時点では this がイベントソースオブジェクト、event がイベントパラメータ
handle: function (event) { // 1904
var all, handlers, namespaces, namespace, events;
event.currentTarget = this;イベント オブジェクト イベント ハンドラー リストを検索します。
var events = jQuery.data(this, "events"), handlers = events[event.type];
if (events && handlers) {
// クローンを作成します。操作を防ぐためのハンドラー
handlers = handlers.slice(0);
for (var j = 0, l = handlers.length; j < l; j ) {
var handleObj = handlers[j] ;

// イベント登録時に保存されたパラメータを取得します。
event.handler = handleObj.data;
event.handleObj = handleObj; >var ret = handleObj.handler.apply(this, argument);
}
}
return event.result;
// #2020
特別: {}
}
//バインド関数定義
jQuery.fn.bind = function(type, fn)
{
var handler = fn;
//jQuery.event.add を呼び出すイベント
for (var i = 0, l = this.length; i
jQuery.event.add(this[i], type, handler); を追加します。
return this ;
}
jQuery.fn.unbind = function (type, fn) {
// オブジェクトリテラルを処理します
if (typeof type === "object" && !type .preventDefault) {
for (var key in type) {
this.unbind(key, type[key])
}
} else {
for (var i = 0, l = this.length ; l
jQuery.event.remove(this[i], type, fn);
これを返します。 }
/ / クリックイベント登録メソッド
jQuery.fn.click = function (fn) {
this.bind("click", fn);
return this; >



このようにして、ページ上の ID msg を持つ要素に対して、次のコードを通じてクリック イベント ハンドラー関数を登録できます。




コードをコピー


コードは次のとおりです:


// イベント操作
$( "#msg ").click(
function () {

alert(this.innerHTML);
}
);