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. Spring Boot与Docker部署

    开启Docker远程访问 首先需要开启docker远程访问功能,以便可以进行远程操作. CentOS 6 修改/etc/default/docker文件,重启后生效(service docker re ...

  2. 20175213吕正宏 MyCP（课下任务，必做）

    一.任务详情: 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能,要求MyCP支持两个参数: java MyCP -tx XXX1.txt XXX2.bin 用来把文本文件( ...

  3. mysql主从脚本

    #!/bin/bash #auto make install mysql AB Replication #by author ale #-- :: MYSQL_SOFT="mariadb m ...

  4. qsub

    1.qsub.sh for i in `ls`;do if [ -d $i ];then cd $i if [ -f *.sh ];then qsub -cwd -pe smp -q asm.q,al ...

  5. .net MVC简洁的登录页面

    初学mvc,参考别人的代码写的 界面效果如下: 代码如下: @{ Layout = null; } <!DOCTYPE html> <html> <head> &l ...

  6. Flipping an Image

    Given a binary matrix A, we want to flip the image horizontally, then invert it, and return the resu ...

  7. 【python路飞】编码 ascii码（256位 =1个字节）美国；unicode（万国码）中文 一共9万个 用4个字节表示这9万个子 17位就能表示

    8位一个字节  1024字节 1KB   1024KB 1MB ASCII码不能包含中文.创建了unicode,一个中文4个字节.UTF-8一个中文3个.GBK中国人用的只包含中文2个字节 升级 Un ...

  8. php-fpm重启

    Ubuntu 18.04服务器 修改php init 文件后(/etc/php/7.2/fpm/php.ini)需要重启php-fpm,方法是: kill -USR2 `cat /run/php/ph ...

  9. SpringCloud微服务负载均衡与网关

    1.使用ribbon实现负载均衡ribbon是一个负载均衡客户端 类似nginx反向代理,可以很好的控制htt和tcp的一些行为.Feign默认集成了ribbon. 启动两个会员服务工程,端口号分别为 ...

  10. vs code 配置 php xdebug

    1.安装扩展 php debug 2.下载xdebug插件 做个页面输出phpinfo(),复制到这个页面 https://xdebug.org/wizard.php 提交后会告诉你机子要下载哪个版本 ...