• 理解DOM事件流的三个阶段


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

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

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

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

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

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

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

    这个方法就是:stopPropagation()

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

  • 相关阅读:
    Windows的本地时间(LocalTime)、系统时间(SystemTime)、格林威治时间(UTC-Time)、文件时间(FileTime)之间的转换
    python基础day05
    靠谱的Pycharm安装详细教程
    15.Spring-Boot中使用AOP统一处理web层异常
    16.Spring-Boot中的定时任务
    17.Spring-Boot中HTTPS配置
    18.Spring-Boot devtools项目自动重启
    纯Java配置SpringMvc整合Spring-Data-JPA
    19.Spring-Boot多数据源配置
    1.初识Spring-Cloud
  • 原文地址:https://www.cnblogs.com/asituhaitang/p/8855354.html
Copyright © 2020-2023  润新知