Jquery之美中不足--之三----delegate的缺憾

jquery的delegate有好几个缺憾。----或许是因为sizzle少提供了以refEl为参考、一个按selector来筛选els的filter(els,selector,refEl)的功能，jq需要自己去实现类似的功能。
其一：selector是基于:root的，而不是:scope的。所以，在写代码时，需要带上scrope的定位部分。----注：: root指document根节点， :scope指代理节点
例如，代理div1的儿子，需要这样写：
$('#div1').delegate('#div1>*','click',fun});
而不是这样写：
$('#div1').delegate('>*','click',fun});
示例代码如：

     
     

      
      <
      
      HTML
      
      ><
      
      HEAD
      
      ><
      
      TITLE
      
      >
      
      JK Test
      
      </
      
      TITLE
      
      >
      
      

      
      <
      
      META 
      
      content
      
      ="text/html; charset=gb2312"
      
       http-equiv
      
      =Content-Type
      
      >
      
       

      
      <
      
      script 
      
      src
      
      ="http://common.cnblogs.com/script/jquery.js"
      
       type
      
      ="text/javascript"
      
      ></
      
      script
      
      >
      
       

      
      <
      
      style
      
      >
      
      
div
      
      {
      
      border
      
      :
      
      1px solid balck
      
      ;
      
      padding
      
      :
      
      5px
      
      ;
      
      margin
      
      :
      
      2px
      
      ;
      
      }
      
      

      
      </
      
      style
      
      >
      
      

      
      </
      
      HEAD
      
      >
      
      

      
      <
      
      body
      
      >
      
      

      
      <
      
      div 
      
      id
      
      ="div1"
      
       
      
      >
      
      div1
    
      
      <
      
      div 
      
      id
      
      ="div1_1"
      
       
      
      >
      
      div1_1
        
      
      <
      
      div 
      
      id
      
      ="div1_1_1"
      
       
      
      >
      
      div1_1_1
            
      
      <
      
      span 
      
      style
      
      ="color:red"
      
      >
      
      span
      
      </
      
      span
      
      >
      
      
        
      
      </
      
      div
      
      >
      
      
    
      
      </
      
      div
      
      >
      
      
    
      
      <
      
      div 
      
      id
      
      ="div1_2"
      
       
      
      >
      
      div1_2
    
      
      </
      
      div
      
      >
      
      

      
      </
      
      div
      
      >
      
      

      
      </
      
      body
      
      >
      
      

      
      <
      
      script 
      
      type
      
      ="text/javascript"
      
      >
      
      
$(
      
      '
      
      #div1
      
      '
      
      ).delegate(
      
      '
      
      #div1>*
      
      '
      
      ,
      
      '
      
      click
      
      '
      
      ,
      
      function
      
      (){alert(
      
      this
      
      .innerHTML);});
      
      //
      
      点击div1_1，div1_2或时，都有效。
      
      

      
      </
      
      script
      
      >
      
      

      
      </
      
      HTML
      
      >
     
     

其二：多个祖先满足条件时，只触发了target的closest的那一个祖先，而不是都触发。----想不通jquery为什么要采用这个策略
示例代码如：

     
     

      
      <
      
      HTML
      
      ><
      
      HEAD
      
      ><
      
      TITLE
      
      >
      
      JK Test
      
      </
      
      TITLE
      
      >
      
      

      
      <
      
      META 
      
      content
      
      ="text/html; charset=gb2312"
      
       http-equiv
      
      =Content-Type
      
      >
      
       

      
      <
      
      script 
      
      src
      
      ="http://common.cnblogs.com/script/jquery.js"
      
       type
      
      ="text/javascript"
      
      ></
      
      script
      
      >
      
       

      
      <
      
      style
      
      >
      
      
div
      
      {
      
      border
      
      :
      
      1px solid balck
      
      ;
      
      padding
      
      :
      
      5px
      
      ;
      
      margin
      
      :
      
      2px
      
      ;
      
      }
      
      

      
      </
      
      style
      
      >
      
      

      
      </
      
      HEAD
      
      >
      
      

      
      <
      
      body
      
      >
      
      

      
      <
      
      div 
      
      id
      
      ="div1"
      
       
      
      >
      
      div1
    
      
      <
      
      div 
      
      id
      
      ="div1_1"
      
       
      
      >
      
      div1_1
        
      
      <
      
      div 
      
      id
      
      ="div1_1_1"
      
       
      
      >
      
      div1_1_1
            
      
      <
      
      span 
      
      style
      
      ="color:red"
      
      >
      
      span
      
      </
      
      span
      
      >
      
      
        
      
      </
      
      div
      
      >
      
      
    
      
      </
      
      div
      
      >
      
      
    
      
      <
      
      div 
      
      id
      
      ="div1_2"
      
       
      
      >
      
      div1_2
    
      
      </
      
      div
      
      >
      
      

      
      </
      
      div
      
      >
      
      

      
      </
      
      body
      
      >
      
      

      
      <
      
      script 
      
      type
      
      ="text/javascript"
      
      >
      
      
$(
      
      '
      
      body
      
      '
      
      ).delegate(
      
      '
      
      div
      
      '
      
      ,
      
      '
      
      click
      
      '
      
      ,
      
      function
      
      (){alert(
      
      this
      
      .innerHTML);});
      
      //
      
      点击id1_1_1时，应该同时代理到三个div的点击
      
      

      
      </
      
      script
      
      >
      
      

      
      </
      
      HTML
      
      >
     
     

其三：与sizzle一样，可能是没有回溯，在某些情况下有bug。
例如，当span有多个祖先是div时，这个代理会失效：$('body').delegate('body>div span','click',fun;});
示例代码如：

     
     

      
      <
      
      HTML
      
      ><
      
      HEAD
      
      ><
      
      TITLE
      
      >
      
      JK Test
      
      </
      
      TITLE
      
      >
      
      

      
      <
      
      META 
      
      content
      
      ="text/html; charset=gb2312"
      
       http-equiv
      
      =Content-Type
      
      >
      
       

      
      <
      
      script 
      
      src
      
      ="http://common.cnblogs.com/script/jquery.js"
      
       type
      
      ="text/javascript"
      
      ></
      
      script
      
      >
      
       

      
      <
      
      style
      
      >
      
      
div
      
      {
      
      border
      
      :
      
      1px solid balck
      
      ;
      
      padding
      
      :
      
      5px
      
      ;
      
      margin
      
      :
      
      2px
      
      ;
      
      }
      
      

      
      </
      
      style
      
      >
      
      

      
      </
      
      HEAD
      
      >
      
      

      
      <
      
      body
      
      >
      
      

      
      <
      
      div 
      
      id
      
      ="div1"
      
       
      
      >
      
      div1
    
      
      <
      
      div 
      
      id
      
      ="div1_1"
      
       
      
      >
      
      div1_1
        
      
      <
      
      div 
      
      id
      
      ="div1_1_1"
      
       
      
      >
      
      div1_1_1
            
      
      <
      
      span 
      
      style
      
      ="color:red"
      
      >
      
      span
      
      </
      
      span
      
      >
      
      
        
      
      </
      
      div
      
      >
      
      
    
      
      </
      
      div
      
      >
      
      
    
      
      <
      
      div 
      
      id
      
      ="div1_2"
      
       
      
      >
      
      div1_2
    
      
      </
      
      div
      
      >
      
      

      
      </
      
      div
      
      >
      
      

      
      </
      
      body
      
      >
      
      

      
      <
      
      script 
      
      type
      
      ="text/javascript"
      
      >
      
      
$(
      
      '
      
      body
      
      '
      
      ).delegate(
      
      '
      
      body>div span
      
      '
      
      ,
      
      '
      
      click
      
      '
      
      ,
      
      function
      
      (){alert(
      
      this
      
      .innerHTML);});
      
      //
      
      点击span时，应该出现alert的
      
      

      
      </
      
      script
      
      >
      
      

      
      </
      
      HTML
      
      >