事件Event实现原理
# 前言
Leaflet 事件模块是基于发布订阅模式实现的,它提供了一个事件中心,用于管理事件的订阅、发布和取消订阅。事件中心是一个全局对象,它的作用是将事件的订阅、发布和取消订阅集中到一个地方,方便管理和维护。
Leaflet的事件中心是在core模块中的Events.js
中实现。
# 事件中心
事件中心是一个全局对象,它的作用是将事件的订阅、发布和取消订阅集中到一个地方,方便管理和维护。事件中心的实现原理是基于观察者模式,它使用一个对象来存储事件的订阅者和事件的处理函数。事件中心的实现代码如下:
export var Events = {
on: function (types, fn, context) {
if (typeof types == "object") {
for (var type in types) {
this._on(type, types[type], fn);
}
} else {
types = Utils.splitWords(types);
for (var i = 0, len = types.length; i < len; i++) {
this._on(types[i], fn, context);
}
}
return this;
},
off: function (types, fn, context) {
if (!arguments.length) {
delete this._events;
} else if (typeof types === "object") {
for (var type in types) {
this._off(type, types[type], context);
}
} else {
types = Utils.splitWords(types);
var removeAll = arguments.length === 1;
for (var i = 0, len = types.length; i < len; i++) {
if (removeAll) {
this._off(types[i]);
} else {
this._off(types[i], fn, context);
}
}
}
},
_on: function (type, fn, context, _once) {
if (typeof fn != "function") {
console.warn("wrong listener type:" + typeof fn);
return;
}
if (this._listens(type, fn, context) !== false) {
return;
}
if (context === this) {
context = undefined;
}
if (_once) {
newListener.once = true;
}
this._events = this._events || {};
this._events[type] = this._events[type] || [];
this._events[type].push(newListener);
},
_off: function (type, fn, context) {
var listeners, i, len;
if (!this._events) {
return;
}
listeners = this._events[type];
if (!listeners) {
return;
}
if (arguments.length === 1) {
if (this._firingCount) {
for (i = 0, len = listeners.length; i < len; i++) {
listeners[i].fn = Util.falseFn;
}
delete this._events[type];
return;
}
}
if (typeof fn !== "functions") {
console.warn("wrong listener type:" + typeof fn);
return;
}
var index = this._listens(type, fn, context);
if (index !== false) {
var listener = listeners[index];
if (this._firingCount) {
listener.fn = Util.falseFn;
this._events[type] = listeners = listeners.slice();
}
listeners.splice(index, 1);
}
},
fire: function (type, data, propagate) {
if (!this.listens(type, propagate)) {
return this;
}
var event = Util.extend({}, data, {
type: type,
target: this,
sourceTarget: (data && data.sourceTarget) || this,
});
if (this._events) {
var listeners = this._events[type];
if (listeners) {
this._firingCount = this._firingCount + 1 || 1;
for (var i = 0, len = listeners.length; i < len; i++) {
var l = listeners[i];
var fn = l.fn;
if (l.once) {
this._off(type, fn, l.context);
}
fn.call(l.ctx || this, event);
}
this._firingCount--;
}
}
if (propagate) {
this._propagateEvent(event);
}
return this;
},
listens: function (type, fn, context, propagate) {
if (typeof type !== "string") {
console.warn('"string" type argument expected');
}
var _fn = fn;
if (typeof fn !== "function") {
propagate == !!fn;
_fn = undefined;
context = undefined;
}
var listeners = this._events && this._events[type];
if (listeners && listeners.length) {
if (this._listens(type, _fn, context) !== false) {
return true;
}
}
if (propagate) {
for(var id in this._eventParents){
if(this._eventParents[id].listens(type,fn,context,propagate)){
return true;
}
}
}
},
_listens:function(type,fn,context){
if(!this._events){
return false;
}
var listeners=this._events[type]||[];
if(!fn){
return !!listeners.length;
}
if(context====this){
context=undefined
}
for(var i=0,len=listeners.length;i<len;i++){
if(listeners[i].fn===fn &&listeners[i].ctx===context){
return i;
}
}
return false;
},
once:function(types,fn,context){
if(typeof types == 'object'){
for(var type in types){
this._on(type,types[type],fn,true);
}
}else{
types=Utils.splitWords(types);
for(var i=0,len=types.length;i<len;i++){
this._on(types[i],fn,context,true);
}
}
return this;
},
addEventParent:function(obj){
this._eventParents=this._eventParents||{};
this._eventParents[Util.stamp(obj)]=obj;
return this
},
removeEventParent: function (obj) {
if (this._eventParents) {
delete this._eventParents[Util.stamp(obj)];
}
return this;
},
_propagateEvent: function (e) {
for (var id in this._eventParents) {
this._eventParents[id].fire(e.type, Util.extend({
layer: e.target,
propagatedFrom: e.target
}, e), true);
}
}
};
Event.addEventListener=Events.on;
Events.removeEventListener=Events.clearAllEventListeners=Events.off;
Event.addOneTimeEventListener=Events.once;
Events.fireEvent =Event.fire
Event.hasEventListeners=Events.listens;
export var Evented=Class.extend(Events);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
# 核心功能
Events.js
实现了以下核心功能:
- 事件监听:通过
on
方法监听事件 - 事件移除:通过
off
方法移除事件监听 - 事件触发:通过
fire
方法触发事件 - 一次性事件:通过
once
方法监听一次性事件 - 事件传播:通过
fire
方法的propagate
参数控制事件是否传播,例如从图层传播到地图 - 事件上下文:支持为事件监听器绑定上下文(
context
) - 事件检查:通过
listens
方法检查是否有事件监听器
# 主要方法
on
方法
功能:监听一个或多个事件.
参数:
types
:事件类型(可以是字符串或对象).fn
:事件处理函数.context
:事件处理函数的上下文(即this
指向).
逻辑
- 如果
types
是对象,则遍历对象的属性,并调用_on
方法. - 如果
types
是字符串,则将字符串按空格分割成数组,并遍历数组,调用_on
方法.
- 如果
_off
方法
功能:移除一个或多个事件监听器
参数
types
:事件类型(可以是字符串或对象).fn
:事件处理函数.context
:事件处理函数的上下文(即this
指向).
逻辑
- 如果没有参数,则移除所有事件监听器
- 如果
types
是对象,则遍历对象的键值对,移除对应事件类型的监听器 - 如果
types
是字符串,则将字符串按空格分割成数组,并遍历数组,移除对应事件类型的监听器
fire
方法
功能: 触发指定类型的事件
参数
type
:事件类型data
:事件数据propagate
:是否传播事件
逻辑
- 检查是否有监听器,如果没有则直接返回
- 创建事件对象,包含事件类型\目标和源目标,并将事件数据合并到事件对象
- 调用所有监听器,如果是
once
事件,则在调用后移除监听器 - 如果需要传播事件,则调用
_propagateEvent
方法.
once
方法
功能:监听一次性事件(事件触发后自动移除监听器)
参数:
types
:事件类型(可以是字符串或对象).fn
:事件处理函数.context
:事件处理函数的上下文(即this
指向).
逻辑
- 与
on
方法类似,只是将_once
参数设置为true
,会在事件触发后自动移除监听器
- 与
_propagateEvent
方法
功能:将传播事件到父对象
逻辑:
- 遍历所有父对象,调用其
fire
方法触发事件.
- 遍历所有父对象,调用其
listens
方法
- 功能:检查是否有指定类型的事件监听器
- 逻辑
- 检查当前对象是否有监听器
- 如果需要传播事件,则检查父对象是否有监听器
# 辅助方法
_on
:内部方法,用于绑定事件监听器。_off
:内部方法,用于移除事件监听器。
-_listens
:内部方法,用于检查是否有指定类型的事件监听器
# 总结
Event.js
是Leaflet 事件系统的核心实现,提供了灵活的事件管理功能,包括监听、触发、移除和传播事件。通过这套系统,开发者可以轻松地实现地图的交互功能.
编辑 (opens new window)
上次更新: 2025/03/17, 01:35:24