前言

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

我今天思考了一个问题，我们页面的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. SOLID原则

    SOLID是面向对象设计和编程(OOD&OOP)中几个重要编码原则 即:SRP单一责任原则: OCP开放封闭原则: LSP里氏替换原则: ISP接口分离原则: DIP依赖倒置原则. 1. 单一 ...

  2. CSS滚动条

    × 目录 [1]条件 [2]默认 [3]尺寸[4]兼容[5]自定义 前面的话 滚动条在网页中经常见到,却并没有受到足够的重视.只有当因为滚动条的问题需要处理兼容性时,才进行调试操作.本文将就滚动条的常 ...

  3. IOS开发初步

    由于工程实践项目的原因,得学习下IOS开发,今天才知道苹果09年才出的开发工具和开发包,也就是说,满打满算,现在顶多有5年IOS开发的工作经验.在我国2010年才火起来,因为那时候国内的iphone4 ...

  4. [转载]基于TFS实践敏捷-修复Bug和执行代码评审

    本主题阐释了这些功能,以继续这一关注虚拟敏捷团队成员的一天的教程. Peter 忙于编写一些代码以完成积压工作 (backlog) 项任务.但是,他的同事发现了一个阻碍他们工作的 Bug,他想立即修复 ...

  5. IP，路由，交换基础培训记录

    IP 掩码  子网划分 vlan划分(有助于减少广播压力) vlan之间互通通过交换机打通. 路由,静态路由,动态路由(学习到的),路由表,下一跳,网络位长的优先级高. 交换机,hub集线器. hub ...

  6. Spring应用教程-2 方法注入

    作者:禅楼望月(http://www.cnblogs.com/yaoyinglong) 我们通常使用lookup方法注入,它可使Spring替换一个Bean的抽象或具体方法,返回查找容器中,其他Bea ...

  7. [SDK2.2]Windows Azure Virtual Network (4) 创建Web Server 001并添加至Virtual Network

    <Windows Azure Platform 系列文章目录> 在上一章内容中,笔者已经介绍了以下两个内容: 1.创建Virtual Network,并且设置了IP range 2.创建A ...

  8. 基于HTML5的Web SCADA工控移动应用

    在电力.油田燃气.供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex.Silverlight甚至Applet这样的重客户端方案,在 ...

  9. 实现iOS图片等资源文件的热更新化(一): 从Images.xcassets导出合适的图片

    本文会基于一个已有的脚本工具自动导出所有的图片;最终给出的是一个从 Images.xcassets 到基于文件夹的精简 合适 的图片资源集的完整过程.难点在于从完整图片集到精简图片集,肯定是基于一个定 ...

  10. 使用OWIN 为WebAPI 宿主 跨平台

    OWIN是什么? OWIN的英文全称是Open Web Interface for .NET. 如果仅从名称上解析,可以得出这样的信息:OWIN是针对.NET平台的开放Web接口. 那Web接口是谁和 ...