javascript 自定义事件

以前看到jQuery 有自定义事件，以为这个是jQuery自己实现的，今天看权威指南发现原来javascript自己是支持自定义事件的。

下面是书上的一个例子。

 var dataEvent = {};
   dataEvent.send = function (target, datatype, data) {
       if ( typeof target == 'string') target = document.getElementById(target);
	   if ( document.createEvent) {
	     var e = document.createEvent('Events'); //W3C创建新事件的写法
		 e.initEvent('dataavailable', true , false);
	   } else if (document.createEventObject) {
	     var e = document.createEventObject(); //IE的创建新事件的写法
	   } else {
	     return;
	   }
	   e.datatype = datatype;
	   e.data = data;
	   if (target.dispatchEvent) {
	     target.dispatchEvent(e);
	   } else if (target.fireEvent) {
	     target.fireEvent('ondataavailable', e);
	   }
   }
   dataEvent.receive = function (target, handler) {
     if (typeof target == 'string') target = document.getElementById(target);
	 if (target.addEventListener) {
	   target.addEventListener('dataavailable', handler, false);
	 } else if( target.attachEvent) {
	   target.attachEvent('ondataavailable', handler); //IE 
	 }
   }
   dataEvent.receive('test',function(){
      alert('test');
   });

   var data={'name': 'phpzxh'}
   dataEvent.send('test','json', data);

自定义事件的方法其实包括

1.创建事件 document.createEvent(type);

type is a string that represents the type of event to be created. Possible event types include “UIEvents”, “MouseEvents”, “MutationEvents”, and “HTMLEvents”. See Notes section for details.

2. 初始化事件

event.initEvent(eventType,canBubble,cancelable)

参数介绍：

eventType 字符串值。事件的类型。也就是新事件的名字

canBubble 事件是否起泡。

cancelable 是否可以用 preventDefault() 方法取消事件。

3.监听事件事件

target.addEventListener('dataavailable', handler, false);

参数介绍：

dataavailable 新事件名

handler 触发的函数

false 是否是扑获事件模型

4.触发事件

target.dispatchEvent(e);

e 是已经申明的事件对象

target.fireEvent('ondataavailable', e);  IE 的触发事件写法

这里有篇文章介绍自定义事件 http://blog.allenm.me/2010/02/javascript%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6event/