前言

很久没有扯淡了，我们今天来扯淡吧。

我今天思考了一个问题，我们页面的dom树到底是如何渲染的，而CSS盒模型与javascript是否有联系，于是便想到一个问题：

CSS的盒模型具有厚度么？？？

该文只是一种帮助理解的说法，与官方定义不一定统一，权当扯淡

盒模型

稍微入门点的前端都知道CSS盒模型，于是我们不厌其烦的偷图来用：

这个就是我们传说中的盒模型，我们这里先把盒模型放一放，来看我们的DOM事件流

DOM事件流

在上一篇博客中，我们详细说了下javascript的事件机制：【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

今天也不知道怎么发神经了，突然对其中两个事件参数产生兴趣：

currentTarget

某事件处理程序当前正在处理的那个元素

target

事件目标（绑定事件那个dom），源事件触发点

这两个兄弟非常有意思，为了说明他的有意思，我写了一段代码：

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

          #p { width: 300px; height: 300px; padding: 10px;  border: 1px solid black; }

          #c { width: 100px; height: 100px; border: 1px solid red; }

     </style>

 </head>

 <body>

     <div id="p">

         parent

         <div id="c">

             child

         </div>

     </div>

     <script type="text/javascript">

         var p = document.getElementById('p'),

         c = document.getElementById('c');

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

             alert('子节点捕获')

         }, true);

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

             alert('子节点冒泡')

         }, false);

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

             alert('父节点捕获')

         }, true);

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

             alert('父节点冒泡')

         }, false);

     </script>

 </body>

 </html>

http://sandbox.runjs.cn/show/ij4rih6x

这个家伙其实是非常有意思的，按照我们当时的逻辑：

① 点击parent，事件首先在document上然后parent捕获到事件，处于目标阶段然后event.target也等于parent，所以触发捕获事件

由于target与currentTarget相等了，所以认为到底了，开始冒泡，执行冒泡事件

② 点击child情况有所不同，事件由document传向parent执行事件，然后传向child最后开始冒泡

上面的解释没问题，我们很多朋友也都清楚，但是我今天突然问题就来了，CSS盒模型尼玛到底是怎么排布的？？？

猜想一：积木式=盒模型

首先，也是最简单的猜想，盒模型就是堆积木（其实根据上图来看，这个想法自然而然）

这个想法简单，而且直观，也和我们一般的思维类似，但是问题马上来了：

事件捕获会先于事件冒泡发生

事件捕获：由最先接收到事件的元素然后传向最里边

虽然是中文翻译，我们可以得到两个重要信息（点击child div、忽略document）：

① parent div 应该先于child div触发

② “最里面”，这个最里面应该如何理解需要关注！！！

悖谬

按照上图的理解，我们这里就该child div事件先触发呢，情况却是parent div先触发，这与常理不合，所以CSS盒模型不应该是这个样子

于是，我这里推翻了猜想一，这里进行猜想二。

猜想二：盒子=盒模型

这个猜想也比较直接，因为盒模型嘛。。。。。。

最初，我在想盒模型是这个样子，他能很好的解释为什么会先触发parent的click事件而不是child的，但是他仍有一个让我难受的地方：

我body或者parent div如果有颜色，我里面的元素岂不是看不到了？？？这与现实不合啊？？？

于是我再一次陷入僵局，于是进入猜想三，也是最终猜想

最终幻想：盒模型=具有厚度一面透明盒子

其实用盒子来形容盒模型是非常贴切的，而且

CSS盒模型是具有厚度的

我们这里有一个很好的形容词来形容CSS盒模型：捅不破的XX膜！

PS：这里本来想画一个图的但是，确实画不出来，各位将就点听我描述吧，我觉得

这个应该是我们的盒模型了，由此我们就可以更好的说明我们的答案了：

① 点击parent区域时，我们首先触发一次点击，流程如下：

document=》body=》parent div=开始冒泡=》parent div=》body=》document

我们因为在parent div上注册了事件，所以他会执行

② 点击child区域时

document=》body=》parent div=》child div=开始冒泡=》child div =》parent div=》body=》document

这里情况也比较明显了，我们一次点击鼠标会点破透明膜，然后一次会碰到上面的元素（离开时候会记住碰到的最深dom也就是target）

底层事件模拟（纯粹幻想）

好了，我们这里来做一次详细的事件模拟：

① 首先我们组织我们的dom树，为dom绑定事件（这里绑定事件我就当向hash中传入了值）

 el.addEventListener(type, fn, useCapture);

 //每个dom在浏览器中肯定会具有一个唯一标识，我不知道是什么，暂且认为是uuid

 //于是上面的代码在浏览器中大概是这个意思

 var hashCapture = {};//保存捕获事件集合

 var hashBubble = {};//保存冒泡事件集合

 if (useCapture) {

     //装载捕获时的click事件

     pushSet(el, type, fn, hashCapture);

 } else {

     //装载冒泡时的click事件

     pushSet(el, type, fn, hashCapture);

 }

 function pushSet(el, type, fn, hashSet) {

     hashSet[el.uuid] = {};

     hashSet[el.uuid][type].push(fn);

 }

PS：注意，此处完全是一种假想，我并不知道系统底层如何实现

按照上述思想，其实保存了两个对象：

一个关于捕获时期dom（el）click事件的集合（）——hashCapture

一个关于冒泡时期dom（el）click事件的集合（）——hashBubble

② 我们开始点击，然后记录点击过程中，手指碰到的元素（我们这里简化去掉document）

body=》parent div=》child div=》child div =》parent div=》body

按照上面的逻辑，我首先碰到了body，离开前碰到了child div，我们最好触碰的dom就是target，所以

 var Event = {};

 //捕获时碰到的dom

 Event.captureDoms = [];

 //冒泡时候碰到的dom

 Event.captureDoms = [];

 Event.target = dom;//最后碰到的元素

所以上面的target永远都是child div，而currentTarget却会不断变化

captureDoms装的是body，parent div， child div

而captureDoms 与他一致，只不过顺序是反的，最好就只剩下执行事件了

PS：当我们鼠标离开window时，判断为一次点击，于是：

 for (var i = 0, len < Event.captureDoms.length; i < len; i++) {

     var el = Event.captureDoms[i];

     var uuid = el.uuid;

     //获取捕获中保存的click事件集合

     for (var j = 0, len1 < hashCapture[uuid].click.length; j < len1; j++) {

         hashCapture[uuid]['click'][j](Event);//执行保存的click事件

     }

 }

然后执行冒泡时候的相同逻辑即可，于是就我们的猜想结束......

firefox模型

firefox dom结构如此，但是与我的猜想好像不一样......

结语

我们的盒模型具有厚度吗？我认为是具有的，而且他很好的解释了我遇到的问题，所以我认为他是具有的，我能自圆其说......

【前端盲点】DOM事件流论证CSS盒模型是否具有厚度的更多相关文章

  1. 【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局

    1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...

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

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

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

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

  4. Dom事件流、冒泡、捕获

    Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...

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

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

  6. Js-事件分发与DOM事件流

    原文地址:https://www.jianshu.com/p/dc1520327022 Js事件分发与DOM事件流 对JavaScript分发事件不熟悉,网上查阅相关资料整理后,记录一下对Javasc ...

  7. [DOM Event Learning] Section 4 事件分发和DOM事件流

    [DOM Event Learning] Section 4 事件分发和DOM事件流 事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...

  8. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

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

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

随机推荐

  1. JSP网站开发基础总结《八》

    JSP的学习总结到本篇已经八篇了,内容比较多,但都是实战,本篇最后为大家介绍一个小效果:百度分页.就是当我们遍历的数据对象较多时,这时我们就会看到了这个效果了,那他是如何实现的呢?下面我们就一起学习一 ...

  2. structs2之多文件上传

    //首先是Action部分import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; i ...

  3. mysql数据库移植

    在mysql数据库移植的时候,把自己电脑上mysql中data目录的一些重要文件复制到其他电脑上,先备份一下其他电脑上的mysql的data目录,然后替换! 例如我的mysql默认的数据库文件位置:  ...

  4. 《BI那点儿事》浅析十三种常用的数据挖掘的技术

    一.前沿 数据挖掘就是从大量的.不完全的.有噪声的.模糊的.随机的数据中,提取隐含在其中的.人们事先不知道的但又是潜在有用的信息和知识的过程.数据挖掘的任务是从数据集中发现模式,可以发现的模式有很多种 ...

  5. 10个实用的 CSS3 按钮效果制作教程

    人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...

  6. 【转】FastCgi与PHP-fpm关系

    刚开始对这个问题我也挺纠结的,看了<HTTP权威指南>后,感觉清晰了不少. 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式的,方便CGI程序的编写者. ...

  7. Newtonsoft.Json 的序列化与反序列化

    首先补充一点,Json.Net是支持序列化和反序列化DataTable,DataSet,Entity Framework和NHibernate的.我举例说明DataTable的序列化和反序列化.创建一 ...

  8. EF 中事务的书写

    在EF 中怎么使用事务? 这个问题纠结了我好久,直到有人跟我一起讨论,我和同事一起讨论查资料. 查的好多资料都是使用 using (TransactionScope scope = new Trans ...

  9. Guava并发：ListenableFuture与RateLimiter示例

    ListenableFuture顾名思义就是可以监听的Future,它是对java原生Future的扩展增强 RateLimiter类似于JDK的信号量Semphore,他用来限制对资源并发访问的线程 ...

  10. 从vs2010的UnitTestFramework类库提取私有方法反射调用的方法

    背景 年龄大点的程序员都知道在vs2010中创建单元测试非常的简单,鼠标定位在方法名字,右键创建单元测试,就会创建一个测试方法,即使是在私有方法上也可以创建测试方法. VS2010以后就没这么简单了, ...