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

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 后判断是否当前符合条件（选择符），然后把事件拿出来执行。