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

Raaabbit 發布于2019-08-20 17:07 / 2101人閱讀

摘要：直白點事件觸發順序子元素父元素事件冒泡和事件捕獲圖解標準事件監聽標準事件監聽其實是事件冒泡和事件捕獲的混合體任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達。

前言

本文主要介紹 事件冒泡 和 事件捕獲 以及Vue中的capture

主要內容 事件捕獲

含義:從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發,也就是說事件從最上一級元素開始往下查找，直到捕獲到事件目標(target)。
直白點:事件觸發順序    父元素->子元素

事件冒泡

含義:從最不精確的對象(document 對象)開始觸發，然后到最精確對象(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定),也就是說事件從事件目標(target)開始，往上冒泡直到頁面的最上一級元素。
直白點:事件觸發順序    子元素->父元素

事件冒泡和事件捕獲-圖解

W3C標準事件監聽

W3C標準事件監聽其實是事件冒泡和事件捕獲的混合體,任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達document。
使用`addEventListener函數`可以自由選擇事件冒泡和事件捕獲

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

Vue2.0中的capture

代碼直接粘走執行,效果很明了

在冒泡階段中監聽事件(默認)




    
    Title
    
    



  
    One
    
      Two
      
        Three. Click Me!!!

添加修飾符.capture后 在捕獲階段中監聽事件




    
    Title
    
    



  
    One
    
      Two
      
        Three. Click Me!!!

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

...

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

最后

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

差點忘了

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

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

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

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

淺談事件冒泡與事件捕獲

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

zhunjiee 2019-08-21 10:21 評論0 收藏0
vue2.0學習筆記（事件處理）

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

bovenson 2019-08-23 18:35 評論0 收藏0
「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

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

Tony 2019-08-23 15:26 評論0 收藏0
整理DOM事件相關知識點

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

shenhualong 2019-08-02 15:26 評論0 收藏0
整理DOM事件相關知識點

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

red_bricks 2019-08-23 18:25 評論0 收藏0