zepto绑定事件改变冒泡事件流

如果你写zepto操作DOM元素不多，肯定不会认为它会改变冒泡事件流。

Zepto 的事件委托是：

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

话不多说，直接看案列：

<div class="a">
    A
    <div class="b">
        B
        <div class="c">
            C
            <div class="d">
                D
            </div>
        </div>
    </div>
</div>

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

<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('.a').on('click', '.c', function(event) {
            console.log('a on c');
        });
        $('.a').on('click','.d', function(event) {
            console.log('a on d');
        });
    });
</script>

先输出c,再输出d。而不是我们理解的冒泡事件，原因也是因为委托事件都依次放入一个队列里，谁在前面谁先执行。

再看几个案列：一

    $(function(){
         $('.a').on('click','.d', function(event) {
                console.log('a on d');
            });
        $('.a').on('click', '.c', function(event) {
            console.log('a on c');
        });
    });

以上代码？？就是先输出d，再输出c了。原因就是因为队列。

再看几个案列：二

       $('.c').on('click', function(event) {
                console.log('a on c');
            });
        $('.d').on('click',function(event) {
            console.log('a on d');
        });

以上代码？？就是先输出d，再输出c了。原因就是因为直接bind不影响