zoukankan      html  css  js  c++  java
  • event flow

    • Event.NONE,0,没有事件需要处理
    • Event.CAPTURING_PHASE,1,捕获阶段
    • Event.AT_TARGET,2,目标阶段,事件对象到达事件目标上
    • Event.BUBBLING_PHASE,3,冒泡阶段

    捕获阶段(capture phase)

    The event object propagate through the target's ancestors from the defaultView to the target's parent.
    事件对象在事件目标的祖先中上到下顺向传播,从最顶层的defaultView到事件目标的(直系)父元素。
     
    捕获阶段发生在整个事件流动的开始。在这阶段里事件会从父(主干)到子(分支)由上往下传播,被元素一层层地捕获。
    文章开头的例子里面,捕获阶段的click事件会依次在document、body、div上触发。
    //监听 为true
    // 第三个参数设置是否为捕获阶段,默认为false
    element.addEventListener('click', function() {}, true)

    目标阶段(target phase)

    The event object arrive at the event object's event target.
    事件对象到达事件目标。

    如果事件是不可冒泡的,那整个事件流动会到此为止,不会发生下面的冒泡阶段。

    冒泡阶段(bubble phase)

    The event object propagates through the target's ancestors in reverse order, starting with the target's parent and ending with the defaultView.
    事件对象会在事件目标的祖先元素里反向传播,由开始的父元素到最后的defaultView(document)。

    冒泡阶段发生在最后,这也是我们最为熟悉的一个阶段。在这阶段里事件会从子(分支)到父(主干)逆向传播,看起来像是一个水里的泡泡往上冒。
    例子里面,冒泡阶段的click事件会依次在div、body、document上触发。
     
    若一个元素(div)是目标元素(button)的祖先,那事件对象会在该元素上触发两次:一次是捕获阶段(1)的,另一次是冒泡阶段(3)的。当事件对象在事件目标元素(button)上触发时,事件流动进入了目标阶段(2)。
     
  • 相关阅读:
    java实现远程开机
    windows系统设备管理器显示全部硬件
    使用pl/sql在oracle中新建表和对应序列
    mysql,oracle,sql server中的默认事务隔离级别查看,更改
    没有外网情况下linux安装mysql
    解决IntelliJ IDEA 创建Maven项目速度慢问题 DarchetypeCatalog
    vmware中linux虚拟机使用NAT模式不能连接外网解决
    idea中新建的web项目不能新建servlet
    SSH开源框架的优缺点
    配置JDK环境变量,与各步骤的意义
  • 原文地址:https://www.cnblogs.com/xiajiejie/p/9975122.html
Copyright © 2011-2022 走看看