EventTarget
关键字:自定义的类型,支持事件
实现此EventTarget的目的是为了更好地理解事件event的实现机制。要实现这个机制,就应当实现几个主要的接口分别是
- addListener:根据监听事件的类型,添加listener函数,对于监听同一事件的所有listener函数,应该在监听到事件的时候执行所有的listener函数,故简单地将这些listener放在一个数组中。
- removeListener:根据监听事件的类型,从listeners数组中删除这个listener,达到目的。
- fire :参数为监听类型,和listener的参数传递。
addListener
addListener: function (type, listener) {
"use strict";
//创建一个数组如果不存在的话
if (!this.hasOwnProperty("_listener")) {
this._listener = [];
}
//不存在事件
if (typeof this._listener[type] == "undefined") {
this._listener[type] = [];
}
this._listener[type].push(listener);//事件数组中添加listener
},
removeListener
removeListener: function (type, listener) {
"use strict";
if (this._listener && this._listener[type] instanceof Array) {
var listeners = this._listener[type];
//等于listeners.splice(listeners.indexOf(listener),1);
for (var i = 0, len = listeners.length; i < len; i++) {
if (listeners[i] === listener) {
listeners.splice(i, 1);
break;
}
}
}
}
fire
fire: function (event) {
"use strict";
if (!event.target) {
event.target = this;
}
if (!event.type) {
throw new Error("Event Object missing 'type' ")
}
if (this._listener && this._listener[event.type] instanceof Array) {
var listeners = this._listener[event.type];
listeners.forEach(function (listener) {
listener.call(this, event);
})
}
},
所有代码为:
/**
* Created by bamboo on 2016/4/12.
*/
//一个支持事件event的EventTarget类型
function EventTarget() {
"use strict";
}
EventTarget.prototype = {
constructor: EventTarget,
addListener: function (type, listener) {
"use strict";
//创建一个数组如果不存在的话
if (!this.hasOwnProperty("_listener")) {
this._listener = [];
}
//不存在事件
if (typeof this._listener[type] == "undefined") {
this._listener[type] = [];
}
this._listener[type].push(listener);//事件数组中添加listener
},
fire: function (event) {
"use strict";
if (!event.target) {
event.target = this;
}
if (!event.type) {
throw new Error("Event Object missing 'type' ")
}
if (this._listener && this._listener[event.type] instanceof Array) {
var listeners = this._listener[event.type];
listeners.forEach(function (listener) {
listener.call(this, event);
})
}
},
removeListener: function (type, listener) {
"use strict";
if (this._listener && this._listener[type] instanceof Array) {
var listeners = this._listener[type];
//等于listeners.splice(listeners.indexOf(listener),1);
for (var i = 0, len = listeners.length; i < len; i++) {
if (listeners[i] === listener) {
listeners.splice(i, 1);
break;
}
}
}
}
};
测试
//test
var target = new EventTarget();
target.addListener("message", function (event) {
"use strict";
console.log("message is : ", event.data);
});
target.fire({
type: 'message',
data: "Hello World"
});
测试结果
"E:\Program Files (x86)\JetBrains\WebStorm 10.0.4\bin\runnerw.exe" "E:\Program Files\nodejs\node.exe" EventTarget.js
message is : Hello World
Process finished with exit code 0