Dom事件流

dom的结构是一个倒立的树状结构。当一个html元素触发事件时，事件会在dom的根节点和触发事件的元素节点之间传播，中间的节点都会收到该事件。

捕获：div元素触发事件时，事件先从根节点document→html→body→div这个顺序传播。（给这四个节点绑定事件，事件依次触发的顺序）；

冒泡：div元素触发事件时，事件从div→body→html→document这个顺序传播。

dom事件流：先捕获，再冒泡。从document开始，到document结束形成一个完整的事件流。

其实工作中用的最多的也就是阻止冒泡和给父元素绑定事件来监听子元素。

阻止冒泡:stopPropagation();IE cancelBubble = true；

阻止默认行为：preventDefault();IE window.event.returnValue = false;

（到这就完事了，也没啥玩意了）

————可————————爱————————分———————————割——————————线———————-——————————————

标准实现方式使用关键词addEventListener。   element.addEventListener(eventType, fn, false)，第三个参数false表示冒泡,true表示捕获。

我把这个仁兄的例子拿过来了（原谅我的懒，让我复制粘贴一下），可以看一下效果。http://www.cnblogs.com/qiongmiaoer/p/4566917.html

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>bubble event</title>

    <style type="text/css">

        body{margin:0;}

        #one{

            width:500px;

            height:300px;

            background:rgb(255,0,0);

        }

        #two{

            width:400px;

            height:260px;

            background:rgb(255,50,50);

        }

        #three{

            width:300px;

            height:240px;

            background:rgb(255,100,100);

        }

        #four{

            width:200px;

            height:200px;

            background:rgb(255,150,150);

        }

    </style>

</head>

<body>

<div id='one'>

    one

    <div id='two'>

        two

        <div id='three'>

            three

            <div id='four'>

                four

            </div>

        </div>

    </div>

</div>

<script>

    var one = document.getElementById('one');

    var two = document.getElementById('two');

    var three = document.getElementById('three');

    var four = document.getElementById('four');

    var useCapture = false; //false为冒泡获取【目标元素先触发】    true为捕获获取【父级元素先触发】

    one.addEventListener('click', function() {

        console.log('one');

    }, useCapture);

    two.addEventListener('click', function() {

        console.log('two');

    }, useCapture);

    three.addEventListener('click', function() {

        console.log('three');

    }, useCapture);

    four.addEventListener('click', function() {

        console.log('four');

    }, useCapture);

    /*

     false

     冒泡

     点击four div

     输出结果：four three two one

     true

     捕获

     点击four div

     输出结果： one two three four

     */

</script>

</body>

</html>

Dom事件流、冒泡、捕获的更多相关文章

  1. js事件捕获，事件冒泡，事件委托以及DOM事件流

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

  2. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

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

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

  4. 浅析JavaScript事件流——冒泡

    一.什么是事件冒泡流 我们知道事件流指的是从页面中接受事件的顺序. 为了形象理解事件冒泡,可以想象三军主将诸葛亮,在帐内运筹帷幄,眼观六路耳听八方,这时候前方的战事情况就需要靠传令兵来传达,当第一位传 ...

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

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

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

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

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

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

  8. DOM事件流

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

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

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

随机推荐

  1. ArcGIS案例教程-通过点坐标生成矩形

    ArcGIS案例教程-通过点坐标生成矩形 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 功能:以点坐标为中心,通过指定尺寸,生成矩形 成果形式:绿色工具,免安装,不 ...

  2. 如何在Mac上用汇编语言写HelloWorld

    首先,Mac自带nasm,不过我们要先将其升级. 升级它的方法有很多种,因为我已经装好了homebrew,所以我直接在终端输入: brew install nasm 这样就升级啦- 接下来,创建一个H ...

  3. java课程之团队开发冲刺1.3

    一.总结昨天进度 1.完成任务指标,但是有些问题没有得到根本上解决,只是换方式解决了 2.使用时间:6小时 二.遇到的困难 1.在设置AlertDialog弹窗组件的时候,没有办法获取选中值,再实验多 ...

  4. python表格导出--xlwt的使用

    xlwt可以用来导出excel表,下面介绍一下它的用法: 1. 安装xlwt模块 pip install xlwt 2. 使用xlwt模块:后端接口编写 import xlwt #导出表格接口 def ...

  5. Linux开始结束ping命令

    ctrl+c可以终止ping ctrl+z可以暂停ping,该暂停只是把进程放到后台去了,使用命令fg可以调出到前台来 通过以下命令可以设置次数: ping -c    10 (次数)  ip(域名) ...

  6. 云笔记项目-MyBatis返回自增类型&堆栈对象补充理解

    在云笔记项目中,讲到了MySql的自增,MyBatis查询到自增类型数据后可以设置返回到参数属性,其中学习了MySql的自增写法,堆栈对象等知识. MySql数据类型自增 建立一张Person表,其中 ...

  7. python 编程

    1.一个str A,列表B的所有元素都在A中时返回True A = 'HeooWoldHomeUbuntuCentOSFedora'B = ['Ubuntu', 'CentOS', 'Home', ' ...

  8. SwipeBackLayout 右滑退出Activity

    不推荐通过添加依赖的方式来导入类库,因为本人导入后出现没法解决的问题. 这里推荐自己导入第三方库类,地址如下: https://github.com/yangzhilong00/MEvolution/ ...

  9. eclipse中启动服务时提示端口被占的2种解决方案

    出现类似这样的:port '19001' at localhost are already in use 第一种:在任务管理器中关闭相关eclipse进程,然后重启eclipse.这种方法可能有时候会 ...

  10. 4-19 css属性

    1. margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合 ...