为jQuery添加自定义事件机制

ioryioryzhan

浏览: 153599 次
性别:
来自: 北京

最近访客更多访客>>

智拔天下

没有不想起

wudiyifeng

songliang_323

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax / JavaScript

jQuery Flex JavaScript HTML

之前一直做flex，现在来做js，觉得js的事件机制不是很好用，参考flex的事件机制为jQuery开发一个插件，即自定义事件。利用这个插件，jQuery对象能够派发自定义的事件，而父级的对象能够对此事件进行监听，对事件的处理依次分为捕获，目标，冒泡三个阶段。

捕获：从根结点出发，到派发事件的目标对象，如果注册了监听，即会执行监听函数。默认时，不打开捕获

目标：发出事件的目标对象，如果注册了监听，即会执行监听函数

冒泡：捕获的反过程，即从目标对象出发，依次调用父级对象的监听函数。默认时，打开冒泡

给个例子：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>text jquery.jevent.js</title>
		<script type="text/javascript" src="jquery-1.2.6.js"></script>
		<script type="text/javascript" src="jquery.jevent.js"></script>
		<script type="text/javascript" >
			var str1 = "Click1";
			var str2 = "Click2";
			$(document).ready(function(){
                          $("#div1").  addJEventListener(str1,  function(data,str){alert("div1"+"@"+data.msg+"@"+str);},true);
                          $("#div11").addJEventListener(str1,   function(data,str){alert("div11"+"@"+data.msg+"@"+str);},true);
                          $("#div2").  addJEventListener(str2,           function(data,str){alert("div2"+"@"+data.msg+"@"+str);},true);
                          $("#div21").addJEventListener(str2,           function(data,str){alert("div21"+"@"+data.msg+"@"+str);});
                          $("#button1").addJEventListener(str1,       function(data,str){alert("button1"+"@"+data.msg+"@"+str);});
                          $("#button2").addJEventListener(str2,       function(data,str){alert("button2"+"@"+data.msg+"@"+str);},true);
                          $("#button1").click(function(){
	                         $(this).dispatchJEvent(str1,{msg:"msg from button1"});
                          });
                         $("#button2").click(function(){
                                $(this).dispatchJEvent(str2,{msg:"msg from button2"});
                         });				
	               });
		</script>
	</head>
	<body>
		
	  <div id="div1">
	   <div id="div11">
		<img id="img1" src="pic3.jpg" width="140" height="140"/>
		<input type="button" id="button1" value="click Me 1!"/>
	   </div>
	  </div>
	  
	   <div id="div2">
	   <div id="div21">
		<img id="img2" src="pic5.jpg" width="140" height="140"/>
		<input type="button" id="button2" value="click Me 2!"/>
	   </div>
	  </div>
	  
	</body>
</html>

这个例子中，各级结点都通过addJEventListener()分别注册了对"Click1"或"Click2"事件的监听，而点击button1时，会通过dispatchJEvent()派发事件，例子可以从附件中下载。如点击button1时，依次alert的结果为：

div1@msg from button1@capture //div1在捕获click1事件

div11@msg from button1@caputre //div11在捕获click1事件

button1@msg from button1@target //目标对象button1执行监听函数

div11@msg from button1@bubble //div11在冒泡过程中执行监听函数

div1@msg from button1@bubble //div1的冒泡过程中执行监听函数

可见先严格地执行了上面提到的处理事件的步骤。

细节部分：

1、当事件被派发时，只有目标对象的父级对象能够得到处理事件的机会，如将上面的div2同样也注册对"Click1"的监听，便不会被调用，因为div2并不是button1的父级对象。

2、对象在注册对某一事件的监听时，可以选择是否找开捕获或冒泡，如果打开捕获，则在事件处理的捕获时即会执行监听函数，默认时捕获不打开，冒泡打开。

3、同一对象可以对某一事件多次注册监听，当然也可以删除对事件的监听

对插件提拱的扩展介绍如下：

1、dispatchJEvent: function(name,data,capture,bubble)

jQuery对象通过此函数来派发事件，

name是事件的标识，为一个字符串，

data为事件所携带的信息，该信息会做为参数传递给监听函数，如上例中button1的data为{msg:"msg from button1"},

capture指示对该事件的处理是否开启捕获过程，默认为true，

bubble指示对该事件的处理是否开启冒泡过程,默认为true.

2、addJEventListener:function(name,func,capture,bubble);

jQuery对象可以通过此函数来注册对事件的监听，

name仍是事件的标识，表示注册的是对哪个事件的监听，

capture表示该监听是否参与事件处理的捕获过程，默认为false

bubble表示是否参与事件处理的冒泡过程，默认为true，

func为所注册的监听函数，func定义的格式为 function(data,state) {},data即为事件派发时的参数,state代表此时处理过程位于哪个阶段，是"capture","target"不是"bubble".

3、removeJEventListener:function(name,func);删除对已经注册的监听

4、hasJEventListener:function(name);判断是否已经注册了对某一事件的监听

有了这个插件，应该可以提高jQuery的开发速度了。发上来与大家分享，期待大家的宝贵意见！

jQueryEvent.rar (52.1 KB)
描述: jQuery自定义事件插件
下载次数: 299

5
顶

0
踩

分享到：

flex 自定义TweenEffect方法 | jquery插件开发方法

2008-09-21 13:04
浏览 8025
评论(2)
分类:Web前端
查看更多

2 楼 chzhi 2011-09-09

1楼睿智。。。

1 楼 gfcsquare 2011-04-06

这么好的文章怎么只浏览下载不赞一个
百姓商城

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论