【前端盲点】DOM事件流论证CSS盒模型是否具有厚度
前言
很久没有扯淡了，我们今天来扯淡吧。
我今天思考了一个问题，我们页面的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结构如此，但是与我的猜想好像不一样......
结语
我们的盒模型具有厚度吗？我认为是具有的，而且他很好的解释了我遇到的问题，所以我认为他是具有的，我能自圆其说......
