前言

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

我今天思考了一个问题，我们页面的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盒模型是否具有厚度的更多相关文章

【百度前端技术学院 Day5/6】CSS盒模型及Float简单布局
1. 盒模型 1.1 内容区 content 默认情况下,width和height只包括内容区域的宽和高,不包括border.padding.margin使用box-sizing可以使其包含conte ...
理解DOM事件流的三个阶段
本文主要解决两个问题: 1.什么是事件流 2.DOM事件流的三个阶段事件流之事件冒泡与事件捕获在浏览器发展的过程中,开发团队遇到了一个问题.那就是页面中的哪一部分拥有特定的事件? 可以想象画在一张 ...
从click事件理解DOM事件流
事件流是用来解释页面上的不同元素接受一个事件的顺序,首先要明确两点: 1.一个事件的影响元素可能不止一个(同心圆理论),但目标元素只有一个. 2.如果这些元素都绑定了相同名称的事件函数,我们怎么知道这 ...
Dom事件流、冒泡、捕获
Dom事件流 dom的结构是一个倒立的树状结构.当一个html元素触发事件时,事件会在dom的根节点和触发事件的元素节点之间传播,中间的节点都会收到该事件. 捕获:div元素触发事件时,事件先从根节点 ...
DOM事件： DOM事件级别、DOM事件流、DOM事件模型、DOM事件捕获过程、自定义事件
前端面试中只要问到事件,就肯定会有DOM事件:如果回答出来了,就会一直向下延申,其实这些东西都很简单,但我第一次被问到的时候,也是懵的: DOM事件级别: DOM0 element.onclick = ...
Js-事件分发与DOM事件流
原文地址:https://www.jianshu.com/p/dc1520327022 Js事件分发与DOM事件流对JavaScript分发事件不熟悉,网上查阅相关资料整理后,记录一下对Javasc ...
[DOM Event Learning] Section 4 事件分发和DOM事件流
[DOM Event Learning] Section 4 事件分发和DOM事件流事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在 ...
大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的内容.内边距.边框和外边距的方式元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
js事件捕获，事件冒泡，事件委托以及DOM事件流
一:DOM事件流: 事件流是从页面接收事件的顺序,DOM2级事件规定事件流包括三个阶段: ①事件捕获阶段:用意在于事件达到目标之前捕获它,在事件捕获阶段事件流模型:document→html→body ...

随机推荐

WCF传输1-你是否使用过压缩或Json序列化？
1.当遇到需要传输大量数据时,怎么样传输数据? 2.压缩数据有哪几种常见的方式? 问题1解答:通过压缩来传输数据问题2解答: (1)WCF自带的压缩方式 (2)自定义WCF binding进行压缩 ...
总结整理 -- ruby系列
基础学习 ruby -- 基础学习(一)项目文件夹说明 ruby -- 基础学习(二) 外键配置实现级联删除 ruby -- 基础学习(三)设置中国时区时间 ruby -- 基础学习(四)TimeDa ...
使用bokeh-scala进行数据可视化(2)
目录前言几种高级可视化图表总结一.前言之前已经简单介绍过一次如何使用Bokeh-scala进行数据可视化(见使用bokeh-scala进行数据可视化),以及如何在Geotrel ...
AngularJS入门心得2——何为双向数据绑定
前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯.最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉 ...
Struts+Hibernate+Spring实现用户登录功能
通过登录案例实现三大框架之间的整合,登录功能是任何系统和软件必不可少的一个模块,然而通过这个模块来认识这些复杂的框架技术,理解数据流向和整个设计思路是相当容易的.只有在掌握了这些小模块的应用后,才能轻 ...
Java魔法堂：JVM的运行模式
一.前言 JVM有Client和Server两种运行模式.不同的模式对应不同的应用场景,而JVM也会有相应的优化.本文将记录JVM模式的信息,以便日后查阅. 二.介绍在$JAVA_HOME/jre/ ...
大话ASP.NET(第二篇,Angular结构篇--翻译)
AngularJS API Docs Welcome to the AngularJS API docs page. These pages contain the AngularJS referen ...
View绘制过程理解
假期撸了几篇自定义View相关的东西,后两天下雨呆在家里还是效率太低Orz 每个Activity都包含一个Window对象,这个Window对象通常由PhoneWindow来实现[1],而每个Wi ...
Redis使用总结(3):实现简单的消息队列
参考Redis实现简单消息队列 Redis提供了两种方式来作消息队列.一个是使用生产者消费模式模式,另外一个方法就是发布订阅者模式.前者会让一个或者多个客户端监听消息队列,一旦消息到达,消费者马上消费 ...
【原创】Kakfa message包源代码分析
笔者最近在研究Kafka的message包代码,有了一些心得,特此记录一下.其实研究的目的从来都不是只是看源代码,更多地是想借这个机会思考几个问题:为什么是这么实现的?你自己实现方式是什么?比起人家的 ...

【前端盲点】DOM事件流论证CSS盒模型是否具有厚度

前言

盒模型