zepto繫結事件改變冒泡事件流

weixin_34148340發表於2018-11-15
事件

如果你寫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不影響

相關文章