DOM事件标准定义了两种事件流:Capture(捕获)和Bubbing(冒泡);捕获和冒泡是javascript针对dom事件处理的先后顺序,所谓的先后顺序是指针对父标签与其嵌套子标签,如果父标签与嵌套子标签均有相同的事件时,那一个会先被触发!

捕获:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发;父----》子级

冒泡:事件从最不精确的对象(document 对象)开始触发,然后到最精确(也可以在窗口级别捕获事件,不过必须由开发人员特别指定)。子---》父级

参考图片:

事件捕获阶段:事件从最上一级标签开始往下查找,直到捕获到事件目标(target)。
事件冒泡阶段:事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签。
 
note:在IE浏览器中,只发生事件冒泡的过程;在W3c(或支持事件捕获的)浏览器中,先发生捕获的过程,再发生冒泡的过程。

DOM事件流的更多相关文章

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

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

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

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

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

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

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

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

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

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

  6. Dom事件流、冒泡、捕获

    Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...

  7. 漫谈DOM 事件流的三个阶段

    一丶 流 什么是流? 比如 react 中的单项数据流,Node.js 中的流,或者本文中的 DOM 事件流,都是流的具体体现.专业地讲,流是程序输入或输出的一个连续的字节序列:通俗地讲,流是有方向的 ...

  8. IE和DOM事件流、普通事件和绑定事件的区别

    IE和DOM事件流的区别 IE采用冒泡型事件 Netscape(网络信息浏览器)使用捕获型事件 DOM使用先捕获后冒泡型事件 示例: <body> <div> <butt ...

  9. DOM事件流的三个阶段

    事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流. DOM事件流分为三个阶段,分别为: 捕获阶段:事件从Document节点自上而下向目标节点传播的阶段: 目标阶段:真正的目标 ...

  10. DOM事件: DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件

    前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...

随机推荐

  1. JAVA WEB SpringMVC+Spring+hibernate 框架搭建【转】

    http://my.oschina.net/Thinkeryjgfn/blog/158951

  2. 修改数据库表的schema,(表的[dbo.]前缀)

    数据库使用过程中遇到这种问题,请看下图

  3. JS cookie的使用

    js设置cookie有很多种方法. 第一种:(这个是w3c官网的代码) <script> //设置cookie function setCookie(cname, cvalue, exda ...

  4. FreeSWITCH的TLS加密

    听着很高大上(实际也很实用)的加密机制,在FreeSWITCH里配置支持竟然这么简单! Greate FreeSWITCH and Greate Programmer! ① cd /usr/local ...

  5. PowerShell 4 on win7 sp1

    https://www.microsoft.com/en-hk/download/details.aspx?id=40855 文件太多了,按照这个http://stackoverflow.com/qu ...

  6. VSFTP安全加固

    这几天在公司需要做基线安全,一直都没有经验,所以在网上找了一些,做来参考学习. vsftp配置详解 这里是对vsftp配置文件的详细解释,主要参考了<RedHat8.0网络服务>一书中&l ...

  7. 在Spring中使用脚本

    Spring支持3中不同的脚本语言(看来支持地还挺多的嘛):JRuby.Groovy和BeanShell. 这三个都是java社区的脚本语言(反正到目前为止我一个都没用过,可见我有多挫). JRuby ...

  8. log4j的使用(1) —— 简单入门篇

    这里会介绍三种打印日志的方法:控制台Console,文件File,数据库DataBase 1.下载lo4j的jar包并导入project 2.因为要在数据库添加日志,所以先新建一个库,并新建打印日志的 ...

  9. 多线程处理sql server2008出现Transaction (Process ID) was deadlocked on lock resources with another process and has been chose问题

    多线程处理sql server2008某个表中的数据时,在Update记录的时候出现了[Transaction (Process ID 146) was deadlocked on lock reso ...

  10. 没有Path的Binding

    当Binding源本身就是数据且不需要Path来指明时,可以设置Path的值为".",或直接省略Path.XAML中这个"."可以省略不写,但在C#代码中是不能 ...