发布一个事件管理模块

 

在BeyondSoft期间写了一个关于事件对象的分析报告，期间不断的总结。业余时间练习写了事件管理的各个版本(E0.0.1~E0.3.1)。目的希望根本工作需要选择不同的版本，因为有些库的事件模块很强大但却用不上。灵感来自JQuery , Dean Edwards ,  灵图api  。当然还有与群里 猪婶婶 的讨论。

 

 

/**
 * Event v0.3.1
 * 1, 解决IE fn中丢失this
 * 2, 统一了事件对象作为fn的第一个参数
 * 3, 解决事件对象的兼容性问题，如阻止默认行为，停止冒泡等（支持DOM2/3 events）
 * 4, remove方法新增删除元素type类型的所有监听器(参数传el，type)
 * 5, remvoe方法新增删除元素所有的监听器(参数传el)
 * 6, 解决了同一个事件的handlers执行顺序问题(IE无序，FF/Safari/Chrome中顺序)
 * 8, add方法新增once参数，fn只执行一次
 * 9, 增加对非html元素(普通对象)自定义事件---观察者模式
 * 10,增加dispatch方法
 */

 

以下列出的是完整版E0.3.1的使用

 

1，最简单的添加、删除监听函数的事件

function handle(){
	//todo
}
E.add(document,'click',handle);
E.remove(document,'click',handle);

 

2，为同一个元素添加多个handle时，执行有序。如下先弹出1，再2

function handle1(){
	alert(1);
}
function handle2(){
	alert(2);
}
E.add(document,'click',handle1);
E.add(document,'click',handle2);

 

3，handle只执行一次

function handle(){
	alert(1);
}
E.add(document,'click',handle,true);

 

4，删除元素指定类型的所有监听器

function handle1(){
	alert(1);
}
function handle2(){
	alert(2);
}
E.add(document,'click',handle1);
E.add(document,'click',handle2);

E.remove(document,'click');

 

5，删除附加元素上的所有监听器

function handle1(){
	alert(1);
}
function handle2(){
	alert(2);
}
E.add(document,'click',handle1);
E.add(document,'mouseover',handle2);

E.remove(document);

 

6，主动触发事件。如模拟用户点击

function handle(){
	alert(1);
}
E.add(document,'click',handle);

E.dispatch(document,'click');

 

7，如有必要，可给html元素添加自定义事件，使用dipatch触发

function handle(){
	alert('myevent');
}
E.add(document,'myevent',handle);
E.dispatch(document,'myevent');

 

8，给任意对象添加自定义事件

function handle(){
	alert('fish is swimming.');
}
var fish = {};
E.add(fish,'swimming',handle);
E.dispatch(fish,'swimming');

 

 

我整理的事件对象属性列表：

http://docs.google.com/View?id=dr9sm67_277d5g7wgdn

 

 

源码见附件

 

 

 

 

评论

1 楼 xiaogezi52 2010-10-29  

真棒，顶一个！