zoukankan      html  css  js  c++  java
  • 理解DOM事件流的三个阶段

    流的概念,在现今的JavaScript中随处可见。比如说React中的单向数据流,Node中的流,又或是今天本文所讲的DOM事件流,都是流的一种生动体现。用术语说流是对输入输出设备的抽象。以程序的角度说,流是具有方向的数据。事件流所描述的就是从页面中接受事件的顺序。事件流也有两种,分别是事件冒泡和事件捕获。

     在所有的现代浏览器当中——除了IE9之前的版本——都实现了DOM2标准事件模型,即事件处理过程的三个阶段:捕获,目标,冒泡;

    (1)捕获阶段:当我们在 DOM 树的某个节点发生了一些操作(例如单击、鼠标移动上去),就会有一个事件发射过去。这个事件从 Window 发出,不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程,就是捕获阶段(Capture Phase)。(所有经过的节点,都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线,以便后面冒泡阶段顺着这条路线返回 Window。)在目标元素对象本身上注册的捕获事件处理程序不会被调用。
    (2)目标阶段:当事件不断的传递直到目标节点的时候,最终在目标节点上触发这个事件,就是目标阶段。
    (3)冒泡阶段:事件冒泡即事件开始时,由最具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点(我们平时用的事件绑定就是利用的事件冒泡的原理)

    事件冒泡即事件开始时,由最具体的元素接收(也就是事件发生所在的节点),然后逐级传播到较为不具体的节点。

    事件捕获的概念,与事件冒泡正好相反。它认为当某个事件发生时,父元素应该更早接收到事件,具体元素则最后接收到事件

    事件一开始从文档的根节点流向目标对象(捕获阶段),然后在目标对向上被触发(目标阶段),之后再回溯到文档的根节点(冒泡阶段)。

    事件冒泡过程,是可以被阻止的。防止事件冒泡而带来不必要的错误和困扰。

    这个方法就是:stopPropagation()

    stopPropagation() 方法:终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点

  • 相关阅读:
    重温CLR(七 ) 属性和事件
    重温CLR(六)方法和参数
    KMP算法
    Webstorm 2019最新激活码
    bash: cd: too many arguments 报错
    mongoDB线上数据库连接报错记录
    常见的 eslint 基本报错信息
    git 查看项目代码统计命令
    npm 删除指定的某个包以及再次安装
    vue.config.js常用配置
  • 原文地址:https://www.cnblogs.com/asituhaitang/p/8855354.html
Copyright © 2011-2022 走看看