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

時間 2019-11-06

原文原文鏈接

前言

本文主要介紹 事件冒泡 和 事件捕獲 以及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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <style>
        * {
              box-sizing: border-box;
              margin: 0;
              padding: 20px;
              transition: background 800ms;
            }
            
            ul {
              height: 100%;
              list-style: none;
              background: hsl(193, 66%, 85%);
            }
            
            li {
              height: 100%;
              background: hsl(193, 66%, 95%);
            }
            
            .highlight {
              background: red;
            }
    </style>
</head>
<body>
<div id="app">
  <ul @click="callback($event)">
    <li @click="callback($event)">One</li>
    <ul @click="callback($event)">
      <li @click="callback($event)">Two</li>
      <ul @click="callback($event)">
        <li @click="callback($event)">Three. Click Me!!!</li>
      </ul>
    </ul>
  </ul>
</div>
<script>
    var pause = 200;
    new Vue({
      el: "#app",
    
      methods: {
        callback(event) {
          var ms = event.timeout = (event.timeout + pause) || 0;
          var target = event.currentTarget;
    
          console.log(target);
    
          setTimeout(function() {
            target.classList.add('highlight');
            setTimeout(function() {
              target.classList.remove('highlight');
            }, pause);
          }, ms);
        }
      }
    })
</script>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <style>
        * {
              box-sizing: border-box;
              margin: 0;
              padding: 20px;
              transition: background 800ms;
            }
            
            ul {
              height: 100%;
              list-style: none;
              background: hsl(193, 66%, 85%);
            }
            
            li {
              height: 100%;
              background: hsl(193, 66%, 95%);
            }
            
            .highlight {
              background: red;
            }
    </style>
</head>
<body>
<div id="app">
  <ul @click="callback($event)">
    <li @click="callback($event)">One</li>
    <ul @click="callback($event)">
      <li @click="callback($event)">Two</li>
      <ul @click="callback($event)">
        <li @click="callback($event)">Three. Click Me!!!</li>
      </ul>
    </ul>
  </ul>
</div>
<script>
    var pause = 200;
    new Vue({
      el: "#app",
    
      methods: {
        callback(event) {
          var ms = event.timeout = (event.timeout + pause) || 0;
          var target = event.currentTarget;
    
          console.log(target);
    
          setTimeout(function() {
            target.classList.add('highlight');
            setTimeout(function() {
              target.classList.remove('highlight');
            }, pause);
          }, ms);
        }
      }
    })
</script>
</body>
</html>

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

<div v-on:click.capture="doThis">...</div>
意思就是不加.capture是事件冒泡,加上.capture就是事件捕獲html