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. Unreal4360全景视频序列渲染

    Unreal4 自带360全景渲染的插件 插件名称叫 Stereo Panoramic Movie Capture 一.打开Edit下的Plugins 二.搜索Stereo Panoramic Mov ...

  2. GIS 案例教程-蜂窝多边形制作模型

    GIS 案例教程-蜂窝多边形制作模型 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 优点: 拖放式,非编程,复制即用,不用配置. 效率高,非迭代,可以处理大数据. ...

  3. ArcGIS 批量修改数据名称-arcgis案例实习教程

    ArcGIS 批量修改数据名称-arcgis案例实习教程 联系方式:谢老师,135-4855-4328,xiexiaokui#qq.com 功能:批量修改数据/文件名称 使用方法: 输入:文件夹(或者 ...

  4. python 二叉树实现带括号的四则运算

    #!/usr/bin/python #* encoding=utf-8 s = "20-5*(0+1)*5^(6-2^2)" c = 0 top = [0,s[c],0] op = ...

  5. 2018-2019-2 20175213实验一 《Java开发环境的熟悉》实验报告

    第一部分实验要求:1 建立“自己学号exp1”的目录2 在“自己学号exp1”目录下建立src,bin等目录3 javac,java的执行在“自己学号exp1”目录4 提交 Linux或Window或 ...

  6. for循环 && for-each

    Effective Java 第46条for-each循环优先于传统for循环 问题: 使用for循环来遍历集合或者是数组可以借助迭代器和索引变量.但是,如果出现循环嵌套的时候很容易引起混乱. 例如: ...

  7. linux查看Java线程

    一.查看Java进程pid的方式 1. ps命令 ps -ef | grep java 2. jvm自带的 jps 工具 3. 当然还有其他命令也可以显示 netstat ,top 二.查看Java线 ...

  8. C#使用Spire.Doc Word for .Net读写Word

    以前对Excel或Word文档操作都使用微软的COM组件Microsoft Word 15.0 object library. 但是这种方式必须要求服务器上安装Office,而且会出现读写操作完成后未 ...

  9. Add `gem 'sqlite3'` to your Gemfile

    错误:Specified 'sqlite3' for database adapter, but the gem is not loaded. Add `gem 'sqlite3'` to your ...

  10. POJ-2236.WireleseNetwork.(并查集)

    Wireless Network Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 43199   Accepted: 178 ...