浅谈---事件冒泡--事件捕获--Vue2.0中的capture

前言

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

代码直接粘走执行,效果很明了

在冒泡阶段中监听事件(默认)

<!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就是事件捕获

最后

首先能帮到你最好,写的不对的地方也请多多见谅,请帮我指正出来,欢迎大牛们来!!!

差点忘了

要是对你有帮助,或者觉着写的还可以,可以推荐和收藏!
3Q!

浅谈---事件冒泡--事件捕获--Vue2.0中的capture

前言

主要内容

事件捕获

事件冒泡

事件冒泡和事件捕获-图解

W3C标准事件监听

Vue2.0中的capture

最后

差点忘了

小慢车

青棘

webpack入门

从零搭建 Node.js 企业级 Web 服务器（零）：静态服务

从零搭建 Node.js 企业级 Web 服务器（十五）：总结与展望

再也不学AJAX了！（二）使用AJAX ① XMLHttpRequest

从零搭建 Node.js 企业级 Web 服务器（一）：接口与分层

【关于Javascript】--- 正则表达式篇

从零搭建 Node.js 企业级 Web 服务器（二）：校验

青棘