美文网首页
Vue中 捕获阶段、冒泡阶段

Vue中 捕获阶段、冒泡阶段

作者: 三月木头 | 来源:发表于2020-10-13 16:33 被阅读0次

事件传递有两种方式:冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?

冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。

捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。

一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。

(1)捕获阶段(Capture Phase)

事件的第一个阶段是捕获阶段。事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。

(2)目标阶段(Target Phase)

当事件到达目标节点的,事件就进入了目标阶段。事件在目标节点上被触发,然后会逆向回流,直到传播至最外层的文档节点。

(3)冒泡阶段(Bubble Phase)

事件在目标元素上触发后,并不在这个元素上终止。它会随着DOM树一层层向上冒泡,回溯到根节点。
冒泡过程非常有用。它将我们从对特定元素的事件监听中释放出来,如果没有事件冒泡,我们需要监听很多不同的元素来确保捕获到想要的事件。

相关文章

  • Vue中 捕获阶段、冒泡阶段

    事件传递有两种方式:冒泡与捕获。 事件传递定义了元素事件触发的顺序。 如果你将 元素插入到 元素中,用户点...

  • 说说 JavaScript 中的冒泡与捕获过程

    W3C 规范中定义了3个事件阶段,依次是捕获阶段 、 目标阶段 、 冒泡阶段。先捕获,后冒泡,捕获从上到下,就像石...

  • 梳理小程序知识(三)

    事件的捕获阶段 自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事...

  • 事件委托与事件监听(皮毛)

    事件监听 addEventListener() 或 attachEvent() 捕获阶段、目标阶段、冒泡阶段。 e...

  • preventDefault与stopPropagation的使

    在讲解这两个方法之前先介绍一下事件处理程序的三个阶段:捕获阶段,“处于目标”阶段,冒泡阶段。下图是捕获阶段和冒泡阶...

  • JS中DOM事件的三个阶段

    1. 三个阶段 捕获阶段 处于目标阶段 冒泡阶段 2. 捕获阶段 捕获阶段是先从父元素开始一级级向上查询子元素的 ...

  • 事件冒泡和事件捕获

    1、事件阶段 如下图所示 一般的,事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。 (1)捕获阶段(Capture...

  • DOM事件

    DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获(eve...

  • 实习第七十天(js事件机制)

    DOM事件流(event flow )存在三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。 事件捕获(eve...

  • 浏览器事件机制

    一、概述 浏览器事件流存在三个阶段:捕获阶段、目标阶段、冒泡阶段,捕获和冒泡是事件传播的两种截然相反的方式。 二、...

网友评论

      本文标题:Vue中 捕获阶段、冒泡阶段

      本文链接:https://www.haomeiwen.com/subject/zvvvpktx.html