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


  • 相关阅读:
    图片中添加文字
    几种经典的滤波算法(转)
    OPENCV初试
    图像处理和图像识别中常用的OpenCV函数
    SIP开发
    【转】opencv老是卡在某一层,
    大电子文件读取成二进制流方案
    C# 调试方法之即时窗口输出
    关于如何解锁你的WP7,以便安装自己开发的程序。
    Windows phone 7 之初体验(一.安装Windows phone 7 sdk)
  • 原文地址:https://www.cnblogs.com/jkisjk/p/jquery_flaw_delegate.html
Copyright © 2020-2023  润新知