EventListener 的简单实现
什么是 EventListener?
EventListener 是一个轻量级事件监听器,被我用在 ACGSounds Runtime Library (ACGSounds Site) 中让所有 Runtime 中的 Object 都继承这个类。
为什么要用 EventListener?
- EventListener 使事件的分发和流程控制变得更为简便。
- 可以在构造类的时候绑定 Internal EventListener 实现内部流程控制
- 可以在外部监听类中发生的事件并获取相应内部消息。
- EventListener 相当轻量级
源码
(function(window, document, undefined) {'use strict';
function EventListener(opts) {
this.events = {};
this.options = {};
this.defaults = {};
extend(this.options, this.defaults, opts);
}
EventListener.prototype = {
on: function(event, callback) {
event = event.toLowerCase();
if (!this.events.hasOwnProperty(event)) {
this.events[event] = [];
}
this.events[event].push(callback);
},
off: function(event, fn) {
if (event !== undefined) {
event = event.toLowerCase();
if (fn !== undefined) {
if (this.events.hasOwnProperty(event)) {
arrayRemove(this.events[event], fn);
}
} else {
delete this.events[event];
}
} else {
this.events = {};
}
},
fire: function(event, args) {
args = Array.prototype.slice.call(arguments);
event = event.toLowerCase();
var preventDefault = false;
if (this.events.hasOwnProperty(event)) {
each(this.events[event], function(callback) {
preventDefault = callback.apply(this, args.slice(1)) === false || preventDefault;
}, this);
}
if (event != 'catchall') {
args.unshift('catchAll');
preventDefault = this.fire.apply(this, args) === false || preventDefault;
}
return !preventDefault;
}
};
function each(obj, callback, context) {
if (!obj) return;
var i;
if (typeof obj == Array) {
for (i = 0; i < obj.length; ++ i)
if (callback.call(context, obj[i], i) === false) return;
} else {
for (i in obj)
if (obj.hasOwnProperty(i) && callback.call(context, obj[i], i) === false) return;
}
}
function extend(dest, args) {
var arg = arguments;
each(arg, function(obj) {
if (obj !== dest) {
each(obj, function(value, key) {
dest[key] = value;
});
}
}, this);
return dest;
}
function arrayRemove(array, value) {
var index = array.indexOf(value);
if (index > -1) {
array.splice(index, 1);
}
}
window.EventListener = EventListener;
})(window, document);