成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

淺談---事件冒泡--事件捕獲--Vue2.0中的capture

Raaabbit / 2111人閱讀

摘要：直白點(diǎn)事件觸發(fā)順序子元素父元素事件冒泡和事件捕獲圖解標(biāo)準(zhǔn)事件監(jiān)聽(tīng)標(biāo)準(zhǔn)事件監(jiān)聽(tīng)其實(shí)是事件冒泡和事件捕獲的混合體任何事件發(fā)生時(shí)，先從頂層開(kāi)始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)。

前言 
本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture
主要內(nèi)容 事件捕獲 
含義:從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā),也就是說(shuō)事件從最上一級(jí)元素開(kāi)始往下查找，直到捕獲到事件目標(biāo)(target)。
直白點(diǎn):事件觸發(fā)順序    父元素->子元素
事件冒泡 
含義:從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā)，然后到最精確對(duì)象(也可以在窗口級(jí)別捕獲事件，不過(guò)必須由開(kāi)發(fā)人員特別指定),也就是說(shuō)事件從事件目標(biāo)(target)開(kāi)始，往上冒泡直到頁(yè)面的最上一級(jí)元素。
直白點(diǎn):事件觸發(fā)順序    子元素->父元素
事件冒泡和事件捕獲-圖解

W3C標(biāo)準(zhǔn)事件監(jiān)聽(tīng) 
W3C標(biāo)準(zhǔn)事件監(jiān)聽(tīng)其實(shí)是事件冒泡和事件捕獲的混合體,任何事件發(fā)生時(shí)，先從頂層開(kāi)始進(jìn)行事件捕獲，直到事件觸發(fā)到達(dá)了事件源元素。然后，再?gòu)氖录赐线M(jìn)行事件冒泡，直到到達(dá)document。
使用`addEventListener函數(shù)`可以自由選擇事件冒泡和事件捕獲


element.addEventListener(event-name, callback, use-capture);
表示在 element 這個(gè)對(duì)象上面添加一個(gè)事件監(jiān)聽(tīng)器，當(dāng)監(jiān)聽(tīng)到有 event-name 事件發(fā)生的時(shí)候，調(diào)用 callback 這個(gè)回調(diào)函數(shù)。 use-capture 這個(gè)參數(shù)，表示該事件監(jiān)聽(tīng)是在“捕獲”階段中監(jiān)聽(tīng)（設(shè)置為 true）還是在“冒泡”階段中監(jiān)聽(tīng)（設(shè)置為 false）。
Vue2.0中的capture

代碼直接粘走執(zhí)行,效果很明了

在冒泡階段中監(jiān)聽(tīng)事件(默認(rèn))



    
    Title
    
    




  
    
    
  • One
    • 
    
      
      
    • Two
      • 
      
        
        
      • Three. Click Me!!!
        • 
      
      
    
    
  






添加修飾符.capture后 在捕獲階段中監(jiān)聽(tīng)事件



    
    Title
    
    




  
    
    
  • One
    • 
    
      
      
    • Two
      • 
      
        
        
      • Three. Click Me!!!
        •

在Vue.js中，我們用修飾符來(lái)達(dá)到事件監(jiān)聽(tīng)是捕獲還是冒泡階段中監(jiān)聽(tīng)的效果。

...

意思就是不加.capture是事件冒泡,加上.capture就是事件捕獲

最后

首先能幫到你最好,寫(xiě)的不對(duì)的地方也請(qǐng)多多見(jiàn)諒,請(qǐng)幫我指正出來(lái),歡迎大牛們來(lái)!!!

差點(diǎn)忘了

要是對(duì)你有幫助,或者覺(jué)著寫(xiě)的還可以,可以 推薦和收藏!
3Q!

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83413.html

相關(guān)文章

  • 淺談事件冒泡與事件捕獲

    摘要：事件冒泡與事件捕獲事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁(yè)面中事件流事件發(fā)生順序的問(wèn)題。事件冒泡微軟提出了名為事件冒泡的事件流。 事件冒泡與事件捕獲 事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁(yè)面中事件流（事件發(fā)生順序）的問(wèn)題。 Click me! 上面的代碼當(dāng)中一個(gè)div元素當(dāng)中有一個(gè)p子元素，如果兩個(gè)元素都有一個(gè)cli...

    zhunjiee 評(píng)論0 收藏0

  • vue2.0學(xué)習(xí)筆記（事件處理）

    摘要：請(qǐng)記住，會(huì)告訴瀏覽器你不想阻止事件的默認(rèn)行為。而單單釋放也不會(huì)觸發(fā)事件。修飾符修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。當(dāng)一個(gè)被銷(xiāo)毀時(shí)，所有的事件處理器都會(huì)自動(dòng)被刪除。 1、監(jiān)聽(tīng)事件 用 v-on 指令監(jiān)聽(tīng) DOM 事件，并在觸發(fā)時(shí)運(yùn)行一些 JavaScript 代碼。 Add 1 The button above has been clicked {{ counte...

    bovenson 評(píng)論0 收藏0

  • 「前端面試題系列7」Javascript 中的事件機(jī)制（從原生到框架）

    摘要：要想注冊(cè)過(guò)的事件能夠被解除，必須將回調(diào)函數(shù)保存起來(lái)，否則無(wú)法解除。當(dāng)用阻止瀏覽器的默認(rèn)行為時(shí)，會(huì)做下面這件事停止回調(diào)函數(shù)執(zhí)行并立即返回。 showImg(https://segmentfault.com/img/bVboOcb?w=750&h=422); 前言 這是前端面試題系列的第 7 篇，你可能錯(cuò)過(guò)了前面的篇章，可以在這里找到： 理解函數(shù)的柯里化 ES6 中箭頭函數(shù)的用法 thi...

    Tony 評(píng)論0 收藏0

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶(hù)與瀏覽器發(fā)生的一些交互時(shí)如果希望去獲得用戶(hù)行為就需要借助事件來(lái)完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識(shí)如下這也是面試中遇到的問(wèn)題事件的級(jí)別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對(duì)象常見(jiàn)的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶(hù)與瀏覽器發(fā)生的一些交互時(shí), 如果希望去獲得用戶(hù)行為, 就需要借助事件來(lái)完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

    shenhualong 評(píng)論0 收藏0

  • 整理DOM事件相關(guān)知識(shí)點(diǎn)

    摘要：事件相關(guān)內(nèi)容當(dāng)用戶(hù)與瀏覽器發(fā)生的一些交互時(shí)如果希望去獲得用戶(hù)行為就需要借助事件來(lái)完成事件部分內(nèi)容在中重要性不言而喻羅列需要了解與事件相關(guān)的知識(shí)如下這也是面試中遇到的問(wèn)題事件的級(jí)別事件模型事件流事件處理程序描述事件捕獲冒泡的具體流程對(duì)象常見(jiàn)的 DOM事件相關(guān)內(nèi)容 當(dāng)用戶(hù)與瀏覽器發(fā)生的一些交互時(shí), 如果希望去獲得用戶(hù)行為, 就需要借助事件來(lái)完成. 事件部分內(nèi)容在 JS中重要性不言而喻. ...

    red_bricks 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<