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. 取消IDEA默认打开最近的项目（设置打开选择创建页面）

    Ctrl + Shift + s 打开设置界面 选择Appearance&Behavior 找到System Settings 将Reopen last project on startup ...

  2. Unix shell范例精解 课后题

    1.read  #屏幕输入read name  #输入名字 2.echo #在终端打印出内容echo "What is your name ?"  # What is your n ...

  3. MYSQL5.7脚本运行时出现[Warning] Using a password on the command line interface can be insecure

    MYSQL版本:5.7 在写linux脚本执行MYSQL命令的时候,如果使用 MYSQL="mysql -hlocalhost -P3306 -uroot -p666666" 登陆 ...

  4. 【STM32】临界区进入退出宏 OS_ENTER_CRITICAL() 和 OS_EXIT_CRITICAL()

    宏函数展开为: #define OS_CRITICAL_METHOD 3 #if OS_CRITICAL_METHOD == 3 #define OS_ENTER_CRITICAL() {cpu_sr ...

  5. 浅谈Tomcat和Servlet

    本文浅谈下对Tomcat和Servlet总体的理解,初学时有用过一段时间,但当时疲于应对如何xml配置和使用,对他们的理解就像是一个黑匣子.现在回顾一下帮助自己加深网络的理解.开始还是先推荐我看的文章 ...

  6. NYOJ37-回文字符串(dp)

    37-回文字符串 内存限制:64MB 时间限制:3000ms 特判: No通过数:88 提交数:177 难度:4 题目描述: 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如& ...

  7. 初学python笔记----字符串

    ---恢复内容开始--- 1.在python中,用引号括起来的都是字符串,引号可以是单引号,也可以是双引号 2.修改字符串的大小写 3.字符串拼接用“+” 4.制表符("\t"), ...

  8. TOMCAT程序的层级目录

    web | |---------js,jsp,html,css(资源文件在web根目录下面 可以被浏览器直接访问) |---------WEB-INF(配置文件web.xml   lib---jar ...

  9. pip安装scrapy出错解决措施

    安装报错提示: building 'twisted.test.raiser' extensionerror: Microsoft Visual C++ 14.0 is required. Get it ...

  10. Python设计模式 - UML - 状态图(State Machine Diagram)

    简介 状态图主要用于描述对象在其生命周期中各种状态.状态之间的转换过程.触发状态转换的各种事件(条件)及执行的动作. 状态图构建步骤 - 找出适合用状态图描述的类.确定类中需要做状态图的重要对象 - ...