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>


  • 相关阅读:
    python学习之- 内置函数
    python学习之- 生成器/迭代器
    python学习之-- 装饰器
    python基础之
    Python基础之 一 字符编码及转换
    为什么utf8占用3个字节
    Python基础之 一 文件操作
    IIS6与IIS7中如何设置文件过期
    分布式缓存系统Memcached简介与实践
    Log4net
  • 原文地址:https://www.cnblogs.com/jkisjk/p/jquery_flaw_delegate.html
Copyright © 2011-2022 走看看