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>


  • 相关阅读:
    unable to import maven project see logs for details
    全栈工程师:第一章:NodeJS的安装与配置
    Unable to open debugger port (127.0.0.1:63959): java.net.SocketException "socket closed",编译过来就是无法打开调试器端口,套接字已关闭
    我的分享:第七章:数据埋点
    我的分享:第六章:IDEA的优秀插件
    我的分享:第五章:java程序员一个人搭建网站(静态的,动态的都有)
    Docker:第三章:简单入门和深入理解
    我的分享:第四章:深入理解MySQL索引底层数据结构与算法
    NPM使用详解(上)
    JS实现继承的几种方式
  • 原文地址:https://www.cnblogs.com/jkisjk/p/jquery_flaw_delegate.html
Copyright © 2011-2022 走看看