浅谈---事件冒泡--事件捕获--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!


小慢车
新司机,车速慢

前面的坑一眼望不到边啊,慢慢爬吧/(ㄒoㄒ)/~~

613 声望
17 粉丝
0 条评论
推荐阅读
webpack入门
npm init -y 生成packge.json。npm i webpack webpack-cli -D,这时候可以npx webpack打包。packge.json文件script中加入 {代码...} 新建webpack.config.js {代码...} 配置完这2个文件就可以直接 npm run dev打包...

青棘阅读 786

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.1k评论 6

【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木32阅读 6.1k评论 9

前面的坑一眼望不到边啊,慢慢爬吧/(ㄒoㄒ)/~~

613 声望
17 粉丝
宣传栏