jQuery 原理的模擬代碼 -3 事件處理

上一篇：jQuery 原理的模擬代碼 -2 數(shù)據(jù)部分

在 jQuery 中，實際注冊的事件處理函數(shù)是一個匿名的閉包函數(shù)，這個函數(shù)最終都是通過調用 jQuery.event.handle 進行處理的。

在對象的私有擴展對象上，專門增加了一個名為 events 的事件管理對象，在這個對象上每種事件分別對應一個同名的屬性，這個屬性的值是一個數(shù)組，針對這個事件的處理程序依次壓入這個數(shù)組中，構成一個事件處理的列表。自定義的事件處理函數(shù)即被壓入這個列表中。

在事件觸發(fā)的時候，通過注冊的匿名函數(shù)來執(zhí)行 jQuery.event.handle ，由于使用了閉包，所以在這個函數(shù)中的 this 就是事件源對象，通過這個事件源對象找到對象的私有擴展數(shù)據(jù)，然后在 events 中找到對應的事件處理程序列表，最后，依次執(zhí)行。

1 /// <reference path="jQuery-core.js" />
2 // #2076
3
4 // 用于生成事件處理函數(shù)的 id
5 jQuery.guid = 1;
6
7 // jQuery 的事件對象
8 jQuery.event = { // # 1555
9
10 // 為對象增加事件
11 // elem 增加事件的元素， type 事件的名稱, handler 事件處理程序, data 事件相關的數(shù)據(jù)
12 add: function (elem, type, handler, data) {
13
14 var handleObjIn, handleObj;
15
16 // 確認函數(shù)有一個唯一的 ID
17 if (!handler.guid) {
18 handler.guid = jQuery.guid++;
19 }
20
21 // 取得這個元素所對應的緩存數(shù)據(jù)對象
22 var elemData = jQuery.data(elem);
23
24 // 取得元素對應的緩存對象上的事件對象和所有事件共用的處理程序
25 var events = elemData.events = elemData.events || {};
26 var eventHandle = elemData.handle;
27
28 // 是否已經(jīng)有事件處理函數(shù) handle 只有一個，都是使用 jQuery.event.handle
29 // 通過使用閉包，使得這個函數(shù)引用當前的事件對象，參數(shù)。
30 if (!eventHandle) {
31 elemData.handle = eventHandle = function () {
32 return jQuery.event.handle.apply(eventHandle.elem, arguments);
33 };
34 }
35
36 // 使得閉包處理程序可以找到事件源對象
37 eventHandle.elem = elem;
38
39 //
40 handleObj = { handler: handler, data: data};
41 handleObj.namespace = "";
42
43
44 handleObj.type = type;
45 handleObj.guid = handler.guid;
46
47 // 每種事件可以有一系列的處理程序，數(shù)組形式
48 var handlers = events[type],
49 special = jQuery.event.special[type] || {};
50
51 // Init the event handler queue
52 if (!handlers) {
53 handlers = events[type] = [];
54
55 // Check for a special event handler
56 // Only use addEventListener/attachEvent if the special
57 // events handler returns false
58 // 完成實際的事件注冊
59 // 實際的事件處理函數(shù)是 eventHandle
60 if (!special.setup || special.setup.call(elem, data, namespaces, eventHandle) === false) {
61 // Bind the global event handler to the element
62 if (elem.addEventListener) {
63 elem.addEventListener(type, eventHandle, false);
64
65 } else if (elem.attachEvent) {
66 elem.attachEvent("on" + type, eventHandle);
67 }
68 }
69 }
70
71 // 自定義的處理函數(shù)在一個堆棧中，以后 jQuery.event.handle 到這里找到實際的處理程序
72 handlers.push(handleObj);
73
74 // Nullify elem to prevent memory leaks in IE
75 elem = null;
76 },
77
78 global: {},
79
80 // 真正的事件處理函數(shù),
81 // 由于是通過 return jQuery.event.handle.apply(eventHandle.elem, arguments) 調用的
82 // 所以，此時的 this 就是事件源對象，event 是事件參數(shù)
83 handle: function (event) { // 1904
84 var all, handlers, namespaces, namespace, events;
85
86 event = window.event;
87 event.currentTarget = this;
88
89 // 在當前的事件對象上找到事件處理列表
90 var events = jQuery.data(this, "events"), handlers = events[event.type];
91
92 if (events && handlers) {
93 // Clone the handlers to prevent manipulation
94 handlers = handlers.slice(0);
95
96 for (var j = 0, l = handlers.length; j < l; j++) {
97 var handleObj = handlers[j];
98
99
100 // 取得注冊事件時保存的參數(shù)
101 event.handler = handleObj.handler;
102 event.data = handleObj.data;
103 event.handleObj = handleObj;
104
105 var ret = handleObj.handler.apply(this, arguments);
106 }
107 }
108
109 return event.result;
110 },
111
112 // #2020
113 special: {}
114
115 }
116
117 // bind 函數(shù)定義
118 jQuery.fn.bind = function( type, fn)
119 {
120 var handler = fn;
121
122 // 調用 jQuery.event.add 添加事件
123 for (var i = 0, l = this.length; i < l; i++) {
124 jQuery.event.add(this[i], type, handler);
125 }
126 return this;
127 }
128
129 jQuery.fn.unbind = function (type, fn) {
130 // Handle object literals
131 if (typeof type === "object" && !type.preventDefault) {
132 for (var key in type) {
133 this.unbind(key, type[key]);
134 }
135
136 } else {
137 for (var i = 0, l = this.length; i < l; i++) {
138 jQuery.event.remove(this[i], type, fn);
139 }
140 }
141
142 return this;
143 }
144 // click 事件的注冊方法
145 jQuery.fn.click = function (fn) {
146 this.bind("click", fn);
147 return this;
148 }

這樣，對于頁面上的 id 為 msg 的元素，就可以通過下面的代碼注冊一個 click 事件處理函數(shù)。

1 // 事件操作
2 $("#msg").click(
3 function () {
4 alert(this.innerHTML);
5 }
6 );

原文：http://www.cnblogs.com/haogj/archive/2010/08/02/1789759.html

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈