jQuery事件高级应用--EventListener/EventHandler(一)
概述
在Web前端开发中,我们经常会遇到以下需求:在渲染一个页面前需要执行function1, function2,function3... 在渲染页面后需要执行function4, function5, function6...在将后台数据绑定到页面前要执行function7, function8...在数据绑定到页面后要执行function9, function10...
主要代码如下
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
var EventListener = function () {};
EventListener.prototype = {
ns: 'co',
event: {},
handlerPool: {},
widget: function () {
return $(document);
},
trigger: function (type, data) {
if (!this.accept(type)) {
return false;
}
this.__bindHandlers(type);
var e = $.Event(type + '.' + this.ns);
e.options = data;
return this.widget().trigger(e);
},
register: function (type, handler) {
if (!this.accept(type) || !handler) {
return false;
}
if ($.isFunction(handler)) {
handler = $.extend(new EventHandler(), {
handle: handler
});
}
var eventType = type;
var handlers = this.handlerPool[eventType] || [];
handlers.push(handler);
this.handlerPool[eventType] = handlers;
},
unregister: function (type, handler) {
if (!this.accept(type)) {
return false;
}
var handlers = this.handlerPool[type];
if (handler && handlers) {
var leftHandlers = $.grep(handlers, function (obj) {
return obj.handle !== handler;
});
if (leftHandlers.length && leftHandlers.length < handlers.length) {
this.handlerPool[type] = leftHandlers;
}
return;
}
delete this.handlerPool[type];
},
accept: function (type) {
var accepted = false;
$.each(this.event, function (key, name) {
if (name === type) {
accepted = true;
return false;
}
});
return accepted;
},
__bindHandlers: function (type) {
var self = this;
if (type) {
self.widget().unbind(type + '.' + this.ns);
var handlers = this.handlerPool[type] || [];
$.each(handlers, function (i, handler) {
self.widget().bind(type + '.' + self.ns, handler.data || {}, handler.handle);
});
}
}
};
var EventHandler = function () {};
EventHandler.prototype.__type = 'EventHandler';
EventHandler.prototype.handle = function () {
return this;
};
EventListener.prototype = {
ns: 'co',
event: {},
handlerPool: {},
widget: function () {
return $(document);
},
trigger: function (type, data) {
if (!this.accept(type)) {
return false;
}
this.__bindHandlers(type);
var e = $.Event(type + '.' + this.ns);
e.options = data;
return this.widget().trigger(e);
},
register: function (type, handler) {
if (!this.accept(type) || !handler) {
return false;
}
if ($.isFunction(handler)) {
handler = $.extend(new EventHandler(), {
handle: handler
});
}
var eventType = type;
var handlers = this.handlerPool[eventType] || [];
handlers.push(handler);
this.handlerPool[eventType] = handlers;
},
unregister: function (type, handler) {
if (!this.accept(type)) {
return false;
}
var handlers = this.handlerPool[type];
if (handler && handlers) {
var leftHandlers = $.grep(handlers, function (obj) {
return obj.handle !== handler;
});
if (leftHandlers.length && leftHandlers.length < handlers.length) {
this.handlerPool[type] = leftHandlers;
}
return;
}
delete this.handlerPool[type];
},
accept: function (type) {
var accepted = false;
$.each(this.event, function (key, name) {
if (name === type) {
accepted = true;
return false;
}
});
return accepted;
},
__bindHandlers: function (type) {
var self = this;
if (type) {
self.widget().unbind(type + '.' + this.ns);
var handlers = this.handlerPool[type] || [];
$.each(handlers, function (i, handler) {
self.widget().bind(type + '.' + self.ns, handler.data || {}, handler.handle);
});
}
}
};
var EventHandler = function () {};
EventHandler.prototype.__type = 'EventHandler';
EventHandler.prototype.handle = function () {
return this;
};
具体如何使用,下次再将吧...