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

Raaabbit 发布于2019-08-20 17:07 / 2076人阅读

摘要：直白点事件触发顺序子元素父元素事件冒泡和事件捕获图解标准事件监听标准事件监听其实是事件冒泡和事件捕获的混合体任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达。

前言

本文主要介绍 事件冒泡 和 事件捕获 以及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云服务器云服务器冒泡事件事件冒泡事件冒泡机制阻止冒泡事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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