zepto綁定事件改變冒泡事件流

bergwhite 發布于2019-08-26 12:23 / 858人閱讀

摘要：如果你寫操作元素不多，肯定不會認為它會改變冒泡事件流。而不是我們理解的冒泡事件，原因也是因為委托事件都依次放入一個隊列里，誰在前面誰先執行。再看幾個案列二以上代碼就是先輸出，再輸出了。原因就是因為直接不影響

如果你寫zepto操作DOM元素不多，肯定不會認為它會改變冒泡事件流。

Zepto 的事件委托是：

在代碼解析的時候，所有document的所有 click 委托事件都依次放入一個隊列里，click 的時候先看當前元素是不是.a，符合就執行，然后查看是不是.b，符合就執行。

話不多說，直接看案列：

先輸出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不影響

云服務器 GPU云服務器冒泡事件事件冒泡事件冒泡機制阻止冒泡事件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108587.html

窺探zepto的事件模塊

摘要：寫在前面通過本文，您可以了解的事件模塊，之后到底發生了什么樣的事情，如何實現的事件委托，如何實現的自定義事件等問題。個人理解這么做目的在于便于移除事件，這樣就可以使用匿名函數，而且仍可以將該匿名函數移除。寫在前面通過本文，您可以了解zepto的事件模塊，$(selector).on之后到底發生了什么樣的事情，如何實現的事件委托【$(selector).delegate】，如何實現的...

frolc 2019-08-21 11:18 評論0 收藏0
zepto與focus/blur與事件委派

摘要：的處理事件注冊流程大致如下為了有事件冒泡以完成事件委派，一般情況下用代替在瀏覽器不支持的情況下，只能用在捕獲階段觸發回調，間接做到事件委派。結果，就是有兩個機會在目標對象上面操作事件。 showImg(https://segmentfault.com/img/bV2KEn?w=1300&h=867); --- focusin、focusout focus、blur 冒泡支持 ...

TNFE 2019-08-22 14:04 評論0 收藏0
讀Zepto源碼之Event模塊

摘要：不支持事件冒泡帶來的直接后果是不能進行事件委托，所以需要對和事件進行模擬。調用函數，分隔出參數的事件名和命名空間。這里判斷是否為函數，即第一種傳參方式，調用函數的方法，將上下文對象作為的第一個參數，如果存在，則與的參數合并。 Event 模塊是 Zepto 必備的模塊之一，由于對 Event Api 不太熟，Event 對象也比較復雜，所以乍一看 Event 模塊的源碼，有點懵，細看下...

vpants 2019-08-20 18:06 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

LiuRhoRamen 2019-08-30 14:11 評論0 收藏0
2018 淺談前端面試那些事

摘要：聲明的變量不得改變值，這意味著，一旦聲明變量，就必須立即初始化，不能留到以后賦值。雖然今年沒有換工作的打算但為了跟上時代的腳步還是忍不住整理了一份最新前端知識點知識點匯總 1.HTML HTML5新特性，語義化瀏覽器的標準模式和怪異模式xhtml和html的區別使用data-的好處meta標簽canvasHTML廢棄的標簽IE6 bug，和一些定位寫法css js放置位置和原因...

stormgens 2019-08-22 15:34 評論0 收藏0