加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 业界 > 正文

jQuery 道理的模仿代码 -3 变乱处理赏罚

发布时间:2018-08-30 09:20:32 所属栏目:业界 来源:站长网
导读:上一篇:jQuery 道理的模仿代码 -2 数据部门 在 jQuery 中,现实注册的变乱处理赏罚函数是一个匿名的闭包函数,这个函数最终都是通过挪用 jQuery.event.handle 举办处理赏罚的。 在工具的私有扩展工具上,专门增进了一个名为 events 的变乱打点工具,在这个工具上

上一篇:jQuery 道理的模仿代码 -2 数据部门

在 jQuery 中,现实注册的变乱处理赏罚函数是一个匿名的闭包函数,这个函数最终都是通过挪用 jQuery.event.handle 举办处理赏罚的。

在工具的私有扩展工具上,专门增进了一个名为 events 的变乱打点工具,在这个工具上每种变乱别离对应一个同名的属性,这个属性的值是一个数组,针对这个变乱的处理赏罚措施依次压入这个数组中,组成一个变乱处理赏罚的列表。自界说的变乱处理赏罚函数即被压入这个列表中。

在变乱触发的时辰,通过注册的匿名函数来执行 jQuery.event.handle ,因为行使了闭包,以是在这个函数中的 this 就是变乱源工具,通过这个变乱源工具找到工具的私有扩展数据,然后在 events 中找到对应的变乱处理赏罚措施列表,最后,依次执行。

1 /// <reference path="jQuery-core.js" />
2 // #2076
3
4 // 用于天生变乱处理赏罚函数的 id
5 jQuery.guid = 1;
6
7 // jQuery 的变乱工具
8 jQuery.event = { // # 1555
9
10 // 为工具增进变乱
11 // elem 增进变乱的元素, type 变乱的名称, handler 变乱处理赏罚措施, data 变乱相干的数据
12 add: function (elem, type, handler, data) {
13
14 var handleObjIn, handleObj;
15
16 // 确认函数有一个独一的 ID
17 if (!handler.guid) {
18 handler.guid = jQuery.guid++;
19 }
20
21 // 取得这个元素所对应的缓存数据工具
22 var elemData = jQuery.data(elem);
23
24 // 取得元素对应的缓存工具上的变乱工具和全部变乱共用的处理赏罚措施
25 var events = elemData.events = elemData.events || {};
26 var eventHandle = elemData.handle;
27
28 // 是否已经有变乱处理赏罚函数 handle 只有一个,都是行使 jQuery.event.handle
29 // 通过行使闭包,使得这个函数引用当前的变乱工具,参数。
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 // 每种变乱可以有一系列的处理赏罚措施,数组情势
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 // 现实的变乱处理赏罚函数是 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 // 自界说的处理赏罚函数在一个仓库中,往后 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 // 真正的变乱处理赏罚函数,
81 // 因为是通过 return jQuery.event.handle.apply(eventHandle.elem, arguments) 挪用的
82 // 以是,此时的 this 就是变乱源工具,event 是变乱参数
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 // 取得注册变乱时生涯的参数
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 函数界说
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 变乱处理赏罚函数。

1 // 变乱操纵
2 $("#msg").click(
3 function () {
4 alert(this.innerHTML);
5 }
6 );

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

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读