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/

posted @ 2013-03-20 17:09  phpzxh  阅读(...)  评论(... 编辑 收藏