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