现在的位置: 首页 > 综合 > 正文

jquery自定义事件

2012年09月01日 ⁄ 综合 ⁄ 共 5255字 ⁄ 字号 评论关闭
之前一直做flex,现在来做js,觉得js的事件机制不是很好用,参考flex的事件机制为jQuery开发一个插件,即自定义事件。 利用这个插件,jQuery对象能够派发自定义的事件,而父级的对象能够对此事件进行监听,对事件的处理依次分为捕获,目标,冒泡三个阶段。

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

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

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

 

给个例子:

Html代码 复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.         <title>text jquery.jevent.js</title>  
  6.         <script type="text/javascript" src="jquery-1.2.6.js"></script>  
  7.         <script type="text/javascript" src="jquery.jevent.js"></script>  
  8.         <script type="text/javascript" >  
  9.             var str1 = "Click1";   
  10.             var str2 = "Click2";   
  11.             $(document).ready(function(){   
  12.                           $("#div1").  addJEventListener(str1,  function(data,str){alert("div1"+"@"+data.msg+"@"+str);},true);   
  13.                           $("#div11").addJEventListener(str1,   function(data,str){alert("div11"+"@"+data.msg+"@"+str);},true);   
  14.                           $("#div2").  addJEventListener(str2,           function(data,str){alert("div2"+"@"+data.msg+"@"+str);},true);   
  15.                           $("#div21").addJEventListener(str2,           function(data,str){alert("div21"+"@"+data.msg+"@"+str);});   
  16.                           $("#button1").addJEventListener(str1,       function(data,str){alert("button1"+"@"+data.msg+"@"+str);});   
  17.                           $("#button2").addJEventListener(str2,       function(data,str){alert("button2"+"@"+data.msg+"@"+str);},true);   
  18.                           $("#button1").click(function(){   
  19.                              $(this).dispatchJEvent(str1,{msg:"msg from button1"});   
  20.                           });   
  21.                          $("#button2").click(function(){   
  22.                                 $(this).dispatchJEvent(str2,{msg:"msg from button2"});   
  23.                          });                   
  24.                    });   
  25.         </script>  
  26.     </head>  
  27.     <body>  
  28.            
  29.       <div id="div1">  
  30.        <div id="div11">  
  31.         <img id="img1" src="pic3.jpg" width="140" height="140"/>  
  32.         <input type="button" id="button1" value="click Me 1!"/>  
  33.        </div>  
  34.       </div>  
  35.          
  36.        <div id="div2">  
  37.        <div id="div21">  
  38.         <img id="img2" src="pic5.jpg" width="140" height="140"/>  
  39.         <input type="button" id="button2" value="click Me 2!"/>  
  40.        </div>  
  41.       </div>  
  42.          
  43.     </body>  
  44. </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);判断是否已经注册了对某一事件的监听

抱歉!评论已关闭.