js增强的自定义事件模型
作者:月影 来源:影月阁 时间:2008-02-18 12:37:00
原型:EventManager是一个重要的原型,它用来赋予对象自定义事件的能力
当对象类型的原型继承EventManager时,对象具有定义、分派和捕捉事件的能力
EventManager有四个重要的方法dispatchEvent、captureEvent、addEventListener和removeEventListener
function EventManager()
{
this.dispatchEvent = function(eventType, eventArgs)
{
eventArgs = eventArgs || {};
var events = this["on"+eventType];
var called = 0;
if(events && typeof(events) == "function")
events = [events];
if(!eventArgs.type) eventArgs.type = eventType;
//阻止默认动作的执行
eventArgs.preventDefault = function()
{
eventArgs.defaultOp = null;
}
//阻止事件起泡
eventArgs.stopPropagation = function()
{
eventArgs.cancelBubble = true;
}
var $pointer = this;
if(events)
{
for(var i = 0; i < events.length; i++)
{
setTimeout(
(function(i){
var evt = events[i];
var len = events.length;
var capturer = events.capturer;
var capturerName = events.capturerName;
return function(){
called++;
var ret = evt.call($pointer,eventArgs);
//如果有捕获事件的方法,并且没有阻止事件气泡,在最后一个事件处理程序结束之后调用它
if(!eventArgs.cancelBubble && called == len && capturer && capturerName && capturer[capturerName])
{
setTimeout(function(){
capturer[capturerName](eventArgs)
},1)
}
//如果定义了默认动作,在最后一个事件处理程序结束之后执行它
if(called == len && eventArgs.defaultOp)
{
eventArgs.defaultOp.call($pointer, eventArgs);
}
return ret;
}
})(i), 1
);
}
}
else if(eventArgs.defaultOp)
{
eventArgs.defaultOp.call($pointer, eventArgs);
}
}
this.fireEvent = this.dispatchEvent;
this.captureEvents = function(target, eventType, capturerName, closure)
{
if(capturerName instanceof Function)
{
closure = capturerName;
capturerName = null;
}
capturerName = capturerName || "on" + eventType;
target["on"+eventType] = target["on"+eventType] || [function(){}];
var events = target["on"+eventType];
if(typeof(events) == "function")
{
target["on"+eventType] = [events];
}
target["on"+eventType].capturer = this;
target["on"+eventType].capturerName = capturerName;
if(closure)
this[capturerName] = closure;
}
this.addEventListener = function(eventType, closure)
{
if(this["on"+eventType] == null)
{
this["on"+eventType] = [];
}
var events = this["on"+eventType];
if(events && typeof(events) == "function"){
this["on"+eventType] = [events];
events = this["on"+eventType];
}
events.push(closure);
return closure;
}
this.removeEventListener = function(eventType, closure)
{
var events = this["on"+eventType];
if(events && typeof(events) == "function")
events = [events];
for(var i = 0; i < events.length; i++)
{
if(events[i] == closure)
events.splice(i, 1);
}
return closure;
}
}
标签:自定义,事件,js
0
投稿
猜你喜欢
绿色下划线的简洁CSS导航代码
2007-09-17 12:51:00
5个CSS3技术实现设计增强
2009-09-04 17:04:00
让验证码友好一点
2007-10-20 13:45:00
Mysql数据库常用命令
2009-03-06 14:29:00
观点 2009 年,IE6 走好
2009-01-04 16:46:00
解决 IE6 内存泄露的另类方法
2008-07-06 23:05:00
Check In和Check Out的多人协作管理
2007-02-03 11:39:00
你是一个职业的页面重构工作者吗?
2008-09-29 12:07:00
JS不同加载方式下的window.onload
2009-05-21 18:09:00
PHP利用ChatGPT实现轻松创建用户注册页面
2023-05-25 09:22:16
IE不支持overrideMimeType()方法,即使是IE7.
2009-02-08 16:58:00
HTML5 离线存储之Web SQL
2011-06-19 14:13:19
php基础字符串与数组知识点讲解
2023-05-25 08:28:14
ASP实现长文章自动分页的函数代码
2008-10-10 17:09:00
ASP实现数据输入、查询的实例
2010-05-03 10:48:00
CSS布局之浮动(三)自适应
2008-08-19 12:49:00
CSS框架/命名/规则 注意要点
2008-06-03 13:07:00
学习XHTML和HTML之间的区别
2007-08-22 11:02:00
ACCESS中Field对象的标题属性
2008-11-20 17:44:00
利用MySQL加密函数保护Web网站敏感数据
2008-12-17 16:11:00