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. 【leetcode❤python】107. Binary Tree Level Order Traversal II

    #-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):#     def __init ...

  2. 【leetcode❤python】101. Symmetric Tree

    #-*- coding: UTF-8 -*-# Definition for a binary tree node.# class TreeNode(object):#     def __init_ ...

  3. C#借助谷歌翻译实现翻译小工具(二)添加托盘图标

    接上一节完善小翻译工具 设置Form的ShowInTaskbar属性为False,取消任务栏显示 设置Form的MaximizeBox属性为False,取消最大化显示 窗口添加两个控件 分别是:Con ...

  4. 【转载】OLE DB, ADO, ODBC关系与区别

    原文:OLE DB, ADO, ODBC关系与区别 OLE DB, ADO, ODBC 一. ODBC(Open Database Connectivity,开放数据库互连)是微软公司开放服务结构(W ...

  5. 错题集锦(二) -- Java专项

    错题集锦(二) -- Java专项 标签(空格分隔): 找工作 JVM的内存模型 线程共享: 堆(Heap):主要存放一些对象实例 方法区(Method Area / Non-Heap):用于存储已被 ...

  6. Hibernate 具体代码

    package com.shuyinghengxie.doudou; import static org.junit.Assert.*; import java.util.Date; import j ...

  7. [SAP ABAP开发技术总结]逻辑数据库

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  8. C# 超时类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  9. 一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标

    一张png图片 上面有多个图标,如何用CSS准确的知道其中某个图片的坐标 ,如下图 可以使用  background background:url(images/xx.png) 40px 10px n ...

  10. Jsoup:解决java.net.UnknownHostException的问题

    Jsoup:解决java.net.UnknownHostException的问题 时间 2013-06-20 11:23:08  CSDN博客 原文  http://blog.csdn.net/xyw ...