zoukankan      html  css  js  c++  java
  • 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});
    示例代码如:
    View Code
    <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为什么要采用这个策略
    示例代码如:
    View Code
    <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;});
    示例代码如:
    View Code
    <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>


  • 相关阅读:
    windows下python-nmap运行过程中出现的问题及解决办法
    命令行下cl.exe编译链接的问题及解决方法
    httrack: error while loading shared libraries: libhttrack.so.2的解决方法
    AES加解密非固定长度文本的用法
    John the Ripper password cracker试用
    ubuntu12.04使用root登陆的简单设置
    map按value查找相应元素
    ListCtrl添加右键菜单(ListCtrl类里编辑,给ListCtrl 发送NM_RCLICK消息)
    今天发现里一个非常好用的Listbox自绘类,带不同文字字体和图片,觉得很有必要记下来
    自绘listCtrl控件选中该行高亮(模拟windows)
  • 原文地址:https://www.cnblogs.com/jkisjk/p/jquery_flaw_delegate.html
Copyright © 2011-2022 走看看