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不影响