前言
很久没有扯淡了，我们今天来扯淡吧。
我今天思考了一个问题，我们页面的dom树到底是如何渲染的，而CSS盒模型与javascript是否有联系，于是便想到一个问题：
CSS的盒模型具有厚度么？？？
该文只是一种帮助理解的说法，与官方定义不一定统一，权当扯淡
盒模型
稍微入门点的前端都知道CSS盒模型，于是我们不厌其烦的偷图来用：
这个就是我们传说中的盒模型，我们这里先把盒模型放一放，来看我们的DOM事件流
DOM事件流
在上一篇博客中，我们详细说了下javascript的事件机制：【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
今天也不知道怎么发神经了，突然对其中两个事件参数产生兴趣：
currentTarget
某事件处理程序当前正在处理的那个元素
target
事件目标（绑定事件那个dom），源事件触发点
这两个兄弟非常有意思，为了说明他的有意思，我写了一段代码：
1 <html xmlns="http://www.w3.org/1999/xhtml">
2 <head>
3 <title></title>
4 <style type="text/css">
5 #p { width: 300px; height: 300px; padding: 10px; border: 1px solid black; }
6 #c { width: 100px; height: 100px; border: 1px solid red; }
7 </style>
8 </head>
9 <body>
10 <div id="p">
11 parent
12 <div id="c">
13 child
14 </div>
15 </div>
16 <script type="text/javascript">
17 var p = document.getElementById('p'),
18 c = document.getElementById('c');
19 c.addEventListener('click', function () {
20 alert('子节点捕获')
21 }, true);
22
23 c.addEventListener('click', function () {
24 alert('子节点冒泡')
25 }, false);
26
27 p.addEventListener('click', function () {
28 alert('父节点捕获')
29 }, true);
30
31 p.addEventListener('click', function () {
32 alert('父节点冒泡')
33 }, false);
34 </script>
35 </body>
36 </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中传入了值）
1 el.addEventListener(type, fn, useCapture);
2 //每个dom在浏览器中肯定会具有一个唯一标识，我不知道是什么，暂且认为是uuid
3 //于是上面的代码在浏览器中大概是这个意思
4
5 var hashCapture = {};//保存捕获事件集合
6 var hashBubble = {};//保存冒泡事件集合
7
8 if (useCapture) {
9 //装载捕获时的click事件
10 pushSet(el, type, fn, hashCapture);
11 } else {
12 //装载冒泡时的click事件
13 pushSet(el, type, fn, hashCapture);
14 }
15
16 function pushSet(el, type, fn, hashSet) {
17 hashSet[el.uuid] = {};
18 hashSet[el.uuid][type].push(fn);
19 }
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，所以
1 var Event = {};
2 //捕获时碰到的dom
3 Event.captureDoms = [];
4 //冒泡时候碰到的dom
5 Event.captureDoms = [];
6 Event.target = dom;//最后碰到的元素
所以上面的target永远都是child div，而currentTarget却会不断变化
captureDoms装的是body，parent div， child div
而captureDoms 与他一致，只不过顺序是反的，最好就只剩下执行事件了
PS：当我们鼠标离开window时，判断为一次点击，于是：
1 for (var i = 0, len < Event.captureDoms.length; i < len; i++) {
2 var el = Event.captureDoms[i];
3 var uuid = el.uuid;
4 //获取捕获中保存的click事件集合
5 for (var j = 0, len1 < hashCapture[uuid].click.length; j < len1; j++) {
6 hashCapture[uuid]['click'][j](Event);//执行保存的click事件
7 }
8 }
然后执行冒泡时候的相同逻辑即可，于是就我们的猜想结束......
firefox模型
firefox dom结构如此，但是与我的猜想好像不一样......
结语
我们的盒模型具有厚度吗？我认为是具有的，而且他很好的解释了我遇到的问题，所以我认为他是具有的，我能自圆其说......
您可以考虑给小钗发个小额微信红包以资鼓励
本文转自叶小钗博客园博客，原文链接：http://www.cnblogs.com/yexiaochai/p/3468489.html如需转载请自行联系原作者
