事件流分为三个阶段:捕获 ==》目标 ==》冒泡

1. 事件捕获阶段:事件传播由目标节点的祖先节点逐级传播到目标节点。先由文档的根 节点 document(window)开始触发对象,最后传播到目标节点,从外向内捕获事件对象;

2 .处于目标阶段:事件到达目标对象,事件触发,如果事件不允许冒泡,事件会在这一 阶段停止传播;

3. 事件冒泡阶段:从目标节点逐级传播到 document 节点 , 从内到外;

ps:冒泡是事件委托的原理;

阻止冒泡的方式:

a)  e.stopPropagation()

b)  return false

DOM 的事件流的更多相关文章

  1. [已转移]IE事件流和DOM标准事件流的区别

    该文章已转移到博客:https://cynthia0329.github.io/ 1.执行的顺序不一样 冒泡型事件模型: button->div->body (IE事件流) 捕获型事件模型 ...

  2. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  3. [转]as3事件流机制彻底理解

    题记: 看过网上一些as3事件流的教程,觉得大多都讲得不甚清楚,让人不能直观的理解事件流.而这篇教程以将事件流过程比喻成捕鱼过程,形象简单. 在此基础上对于as3事件流总算有了全面的理解.事件流机制说 ...

  4. 理解DOM事件流的三个阶段

    本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段 事件流之事件冒泡与事件捕获 在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...

  5. 深入理解DOM事件机制系列第一篇——事件流

    × 目录 [1]历史 [2]事件冒泡 [3]事件捕获[4]事件流 前面的话 javascript操作CSS称为脚本化CSS,而javascript与HTML的交互是通过事件实现的.事件就是文档或浏览器 ...

  6. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  7. 从click事件理解DOM事件流

    事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...

  8. 【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

    前言 很久没有扯淡了,我们今天来扯淡吧. 我今天思考了一个问题,我们页面的dom树到底是如何渲染的,而CSS盒模型与javascript是否有联系,于是便想到一个问题: CSS的盒模型具有厚度么??? ...

  9. js事件捕获,事件冒泡,事件委托以及DOM事件流

    一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

  10. DOM事件流

    DOM事件标准定义了两种事件流:Capture(捕获)和Bubbing(冒泡):捕获和冒泡是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌 ...

随机推荐

  1. 【DataBase】排课设计思路

    想设计一个排课系统,看了网上文库的表结构设计弄的我是一点没看懂 看看知乎又是扯一堆算法 我想一个适用所有学校的排课程序是不现实的,需求是千变万化的 我们理解的,看到的都是已经排好的结果,是Excel把 ...

  2. 【Java】POI Excel导出 动态行合并

    一般情况: Excel导出一般都是一行一行的记录输出 . 这是Controller代码: 标题行的设置: 标题行会设置获取的结果集的字段名,数据会自动根据设置的名称匹配装填 特殊的需求: 如页面的效果 ...

  3. 【OracleDB】 10 数据处理 DML

    DML(Data Manipulation Language – 数据操纵语言) - 向表中插入数据 - 修改现存数据 - 删除现存数据 [事务是由完成若干项工作的DML语句组成的] INSERT 语 ...

  4. 为什么阿波罗机器人(Apollo)是外观最帅的机器人 ?

    资料: https://www.youtube.com/watch?v=3CdwPGC9nyk 答案很简单,那就是这个公司单独找了一个外观设计团队,单独设计的外观. 看来啥事情要想搞的好,那就得多花钱 ...

  5. 绑定国内主机IP的域名网站必须要备案

    买了个域名: http://devilmaycry812839668.top/ 然后绑定了国内的一个云主机,刚搭了个web server,一个网页都没有(短期内页没考虑做网页): 今天看了下web s ...

  6. 向日葵的平替:一款个人开发的远程工具——fastnat

    相关资料: https://www.cnblogs.com/thinkingmore/p/14317505.html https://www.cnblogs.com/thinkingmore/p/15 ...

  7. cuda的slient模式下的安装

    实验室的师弟要搞cuda编译,不会安装cuda,其实这个主要原因还是服务器上是不允许个人随意安装软件的,尤其是nvidia的那些东西,很容易把整个服务器搞崩掉,虽然实验室的服务器集群我是唯一的一个管理 ...

  8. Git报错解决:OpenSSL SSL_read: Connection was reset, errno 10054 错误解决

    1.背景 最近因项目上需要,想借鉴一下spring里面的一下架构设计,在拉取spring源码是报错如下: 初步判定,估计是访问国外的网站,网速受限的原因..... 2.解决方案 打开Git命令页面,执 ...

  9. Microsoft Build Next-Gen Windows Dev (placeholder)

    This is a placeholder page for Microsoft Build after party in next Month. Will update once I get det ...

  10. 学习设计微服务:api认证

    前言最近再学习微服务,所以把自己的个人站点https://www.ttblog.site/拆分成微服务.目前正在思考微服务里面的认证与授权,网上百度到都是根据用户名和密码来实现的,考虑到实际的原因,我 ...