zoukankan      html  css  js  c++  java
  • Event flow

    事件流动

    DOM事件不单单只会在一个Element上触发,它还会流向其他Element。事件的流动通常会经历这么三个阶段:

    捕获阶段(capture phase):

    事件对象在事件目标的祖先中上到下顺向传播,从最顶层的defaultView到事件目标的(直系)父元素。

    捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父(主干)到子(分支)由上往下传播,被元素一层层地捕获。

    目标阶段(target phase):

    事件对象到达事件目标。

     

    冒泡阶段(bubble phase):

    事件对象会在事件目标的祖先元素里反向传播,由开始的父元素到最后的defaultView(document)。

    冒泡阶段发生在最后,这也是我们最为熟悉的一个阶段。在这阶段里事件会从子(分支)到父(主干)逆向传播,看起来像是一个水里的泡泡往上冒。

    若一个元素(div)是目标元素(button)的祖先,那事件对象会在该元素上触发两次:一次是捕获阶段的,另一次是冒泡阶段的。当事件对象在事件目标元素(button)上触发时,事件流动进入了目标阶段。

    • 想监听捕获阶段的事件,可以这样:element.addEventListener('click', cb, true),将第三个参数设置为true。
    • 想监听冒泡阶段的事件,可以这样:element.addEventListener('click', cb,),不使用第三个参数或将其设置为false。
    • 而上述的任何一种监听方式都可以监听到目标阶段的事件。
  • 相关阅读:
    python
    图片放大,缩小等操作
    template-web.js 自定义过滤器
    python
    python
    Android Volley源码分析及扩展
    Android 6.0动态权限申请教程
    Jarsigner签名使用
    Python正则表达式(总)
    Python错误和异常概念(总)
  • 原文地址:https://www.cnblogs.com/DYjun/p/9943471.html
Copyright © 2011-2022 走看看