Javascript自定义事件

自定义事件在很多地方都会用到，然后跟着书实例了几次，然后详细注释，也算给自己做了一个笔记。

 1 //定义一个自定义事件类

 2 //定义一个实例属性用以单独为每一个实例创建独立的事件集

 3 function EventTarget() {  

 4 

 5     this.handles = {};  

 6 

 7 };

 8 

 9  EventTarget.prototype = {

10 

11      //构造函数的指针指向事件本身

12      constructor: EventTarget, 

13 

14 

15      //添加事件代码的函数，接受两个参数，一个为事件的类型一个为事件的处理程序

16      addHandle: function(type, handle) { 

17 

18 

19         //检测添加的事件类型是否存在

20          if(typeof this.handles[type] == 'undefined'){ 

21 

22 

23          //如果不存在则新创建一个，类型为数组,如果存在则push进数组

24              this.handles[type] = []; 

25          }; 

26 

27 

28          this.handles[type].push(handle); 

29 

30      }, 

31 

32      //事件触发函数，接受一个对象，对象至少包括一个type属性

33      fire: function(event) {  

34 

35 

36          //检测传入进来的对象target属性是否存在，如果没有则设置一个指向当前实例的指针

37          if(!event.target) { 

38              event.target = this; 

39          }; 

40 

41          //检测传入的对象里面事件类型是否存在

42          if(this.handles[event.type] instanceof Array) { 

43 

44 

45              //如果存在则把此事件集赋值给handles变量

46              var handles = this.handles[event.type];  

47 

48 

49              //循环检测事件集中的事件处理程序，并且执行每一个事件处理程序

50              var i;

51              for(i= 0, len = handles.length; i<len; i++) {  

52 

53 

54                  //执行事件处理程序，并且传入event对象

55                  handles[i](event);  

56 

57              }; 

58 

59          } 

60 

61      }, 

62 

63 

64      //删除事件程序，接受两个参数，一个为事件类型，一个为事件处理程序

65      removeHandles: function(type,handle) {  

66 

67 

68          //检测事件类型是否存在

69          if(this.handles[type] instanceof Array) { 

70 

71 

72              //把此事件的引用赋值给handles变量

73              var handles = this.handles[type];  

74 

75 

76              //循环此事件类型集

77              var i;

78              for(i= 0, len = handles.length; i < len; i++) { 

79 

80 

81                  //检查此事件集中每一个事件处理程序是否和传入进来的handle绝对等于。

82                  if(handles[i] === handle) {  

83 

84 

85                  //如果等于跳出当前循环，不等于继续循环

86                      break;  

87 

88                  }; 

89 

90              }; 

91 

92 

93              //通过数组的splice方法，把获取到的事件位置i值，已经数值1传入进splice方法删除事件处理程序。

94              handles.splice(i,1);  

95          }; 

96      }; 

97  };

98