前言
很久没有扯淡了,我们今天来扯淡吧。
我今天思考了一个问题,我们页面的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如需转载请自行联系原作者