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

bergwhite 發(fā)布于2019-08-26 12:23 / 913人閱讀

摘要：如果你寫(xiě)操作元素不多，肯定不會(huì)認(rèn)為它會(huì)改變冒泡事件流。而不是我們理解的冒泡事件，原因也是因?yàn)槲惺录家来畏湃胍粋€(gè)隊(duì)列里，誰(shuí)在前面誰(shuí)先執(zhí)行。再看幾個(gè)案列二以上代碼就是先輸出，再輸出了。原因就是因?yàn)橹苯硬挥绊?/p>

如果你寫(xiě)zepto操作DOM元素不多，肯定不會(huì)認(rèn)為它會(huì)改變冒泡事件流。

Zepto 的事件委托是：

在代碼解析的時(shí)候，所有document的所有 click 委托事件都依次放入一個(gè)隊(duì)列里，click 的時(shí)候先看當(dāng)前元素是不是.a，符合就執(zhí)行，然后查看是不是.b，符合就執(zhí)行。

話不多說(shuō)，直接看案列：

先輸出c,再輸出d。而不是我們理解的冒泡事件，原因也是因?yàn)槲惺录家来畏湃胍粋€(gè)隊(duì)列里，誰(shuí)在前面誰(shuí)先執(zhí)行。

再看幾個(gè)案列：一

    $(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了。原因就是因?yàn)殛?duì)列。

再看幾個(gè)案列：二

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

以上代碼？？就是先輸出d，再輸出c了。原因就是因?yàn)橹苯觔ind不影響

GPU云服務(wù)器云服務(wù)器冒泡事件事件冒泡事件冒泡機(jī)制阻止冒泡事件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/108587.html

相關(guān)文章

窺探zepto的事件模塊

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

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

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

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

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

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

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

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

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

stormgens 2019-08-22 15:34 評(píng)論0 收藏0