国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Raaabbit / 2113人閱讀

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

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

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


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

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

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



    
    Title
    
    




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






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



    
    Title
    
    




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

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

...

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

最后

首先能幫到你最好,寫的不對的地方也請多多見諒,請幫我指正出來,歡迎大牛們來!!!

差點(diǎn)忘了

要是對你有幫助,或者覺著寫的還可以,可以 推薦和收藏!
3Q!

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83413.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

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