jquery自定义事件

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

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

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

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

给个例子：

Html代码

<!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>

<!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);判断是否已经注册了对某一事件的监听

posted @ 2009-05-13 16:54 威风剑阅读(1202) 评论(0) 编辑收藏举报

刷新页面返回顶部

jquery自定义事件

公告