前言

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

我今天思考了一个问题，我们页面的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. 前端工程师技能之photoshop巧用系列扩展篇——自动切图

    × 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...

  2. java中泛型上限，下限应用

    v 一.程序中无形之中用到的泛型 import java.util.*; class Person implements Comparable<Person>{ String name; ...

  3. Mina、Netty、Twisted一起学（九）：异步IO和回调函数

    用过JavaScript或者jQuery的同学都知道,JavaScript特别是jQuery中存在大量的回调函数,例如Ajax.jQuery的动画等. $.get(url, function() { ...

  4. OFA & OMF

    OFA OFA(Optimal Flexible Architecture)是Oracle设计的一种文件系统目录结构,目的在于简化多个Oracle产品版本维护.OFA的核心是两个环境变量:ORACLE ...

  5. Nutch源码阅读进程1---inject

    最近在Ubuntu下配置好了nutch和solr的环境,也用nutch爬取了一些网页,通过solr界面呈现,也过了一把自己建立小搜索引擎的瘾,现在该静下心来好好看看nutch的源码了,先从Inject ...

  6. Elasticsearch之_default_—— 为索引添加默认映射

    前篇说过,ES可以自动为文档设定索引.但是问题也来了——如果默认设置的索引不是我们想要的,该怎么办呢? 要知道ES这种搜索引擎都是以Index为实际的分区,Index里面包含了不同的类型,不同的类型是 ...

  7. JVM之类加载器上篇

    首先我们先看一个示例程序: package com.tfdd.test; /** * @desc 类加载校验 * @author chenqm * @date 2016年2月2日 */ class S ...

  8. 找到多个与名为“Login”的控制器匹配的类型

    添加了mvc区域以后,可能出现以下错误... 找到多个与名为“Login”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由在搜索匹配此请求的控 ...

  9. js jquery 异常

    1.0 TypeError: $(...).carousel is not a function原因:可能是没有引用或者引用了多个jquery:<script src="~/js/jq ...

  10. 存储过程返回布尔值以及C#相关处理

    前段时间有在数据库以及程序之间使用到布尔(bool,Boolean)值的问题. 比如在SQL中,你想判断记录是否存? 通常你会这样写: FROM [dbo].[SixSResponsiblePerso ...