美文网首页
jquery ,zepto on 事件绑定执行顺序

jquery ,zepto on 事件绑定执行顺序

作者: Northerner | 来源:发表于2016-06-08 10:07 被阅读2918次
    Paste_Image.png

    1.实验过程


    • Dom 结构
    <div class="a">
         A 
        <div class="b">
               B 
              <div class="c">
                   C
                   <div class="d">
                         D
                   </div>
             </div>
         </div>
     </div>
    
    • Js 脚本
    <script type="text/javascript"> 
    $(function(){ 
          $('.a').on('click', '.c', function(event) {
               alert('a on c');
           }); 
          $('.a').on('click','.d' function(event) {
                alert('a on d'); 
          });
     }); 
    </script>
    
    • Css 样式
    <style type="text/css"> 
    .a{background:#f00;width:500px;height:500px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
     .b{background:#0f0;width:400px;height:400px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
     .c{background:#00f;width:300px;height:300px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
     .d{background:#f0f;width:200px;height:200px;font-size:50px;color:#fff;text-align:center;margin:0 auto;}
    </style>
    
    • 绑定组合
    A on C 后 ,A on D 先
     A on C 后 ,B on C 先
    A on C 后 , B on D 先
    A on D 后 ,B on C 先
    A on D 后 ,B on D 先
    B on C 后 , B on D 先
    

    2.实验结果

    • 结论
      jquery —> 父同子近先,父异(子同或不同)父近先。都与顺序无关
      zepto —> 父同子异顺序先,父异(子同或不同)父近先(与子顺序无关)。

    3.分析结果

    Zepto.js

    Paste_Image.png
    jQuery.js Paste_Image.png Paste_Image.png
    • 结论

    zepto.js 的事件委托:

    在代码解析的时候,所有document的所有 click 委托事件都依次放入一个队列里,click 的时候先看当前元素是不是.a,符合就执行,然后查看是不是.b,符合就执行。

    jquery.js 的事件委托:

    document上委托了2个 click 事件,click 后判断是否当前符合条件(选择符),然后把事件拿出来执行。

    相关文章

      网友评论

          本文标题:jquery ,zepto on 事件绑定执行顺序

          本文链接:https://www.haomeiwen.com/subject/xvkjdttx.html