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. Golang源码探索(三) GC的实现原理（转）

    Golang从1.5开始引入了三色GC, 经过多次改进, 当前的1.9版本的GC停顿时间已经可以做到极短.停顿时间的减少意味着"最大响应时间"的缩短, 这也让go更适合编写网络服务 ...

  2. Windows邮件客户端

    换回WIndows 因为要保存邮件 所以需要邮件客户端 Foxmail 腾讯自家 同样需要独立密码 之前的foxmail是全拼 新注册了一个@qq 发现新注册的@qq绑定到的是新的QQ号 算了 去用1 ...

  3. python 命令行颜色

    #coding=utf-8 import ctypes,sys STD_INPUT_HANDLE = -10 STD_OUTPUT_HANDLE = -11 STD_ERROR_HANDLE = -1 ...

  4. Mongodb数据库学习

    数据库 MongoDB (芒果数据库) 数据存储阶段 文件管理阶段 (.txt .doc .xls)优点 : 数据可以长期保存 可以存储大量的数据 使用简单 缺点 : 数据一致性差 数据查找修改不方便 ...

  5. Locust 学习一 ：初识

    之前就听过Locust是基于python的一款很好用的开源性能测试框架,一直没机会实践,正好这次项目上有个接口压测的小任务,就拿来练练手 安装:py -3 -m pip install locusti ...

  6. python之列表及其方法---整理集

    列表类,类名是list 通过list类创建对象,使用中括号 列表特性: 使用中括号括起来 中间用逗号分隔每个元素 元素可以是数字.字符串.布尔值.列表 列表中可以嵌套列表 列表中每个元素的下标从0开始 ...

  7. hashCode 与 equals

    面试官可能会问你:“你重写过 hashcode 和 equals 么,为什么重写equals时必须重写hashCode方法?”   hashCode()介绍 hashCode() 的作用是获取哈希码, ...

  8. The 16th Zhejiang Provincial Collegiate Programming Contest Sponsored(E F G H I)

    http://acm.zju.edu.cn/onlinejudge/showContestProblems.do?contestId=392 E:Sequence in the Pocket 思路:从 ...

  9. docker简单搭建gitlab

    docker启动非常简单: docker run --detach --hostname 192.168.0.33 --publish 443:443 --publish 80:80 \ --publ ...

  10. Oracle中number(5，-2)数据类型

    举个例子,1234.345 如果为number(5,-2),那么结果为 1200, 如果为number(5,2),那么结果为 1234.35 如果为number(5),那么结果为 1234 说明: N ...