冒泡和捕获

事件流

标准的事件流有三部分，捕获阶段—目标阶段—冒泡阶段。
捕获阶段，该阶段包括从最高节点（IE下为document，其他可以到window）到目标节点的父节点范围内的所有节点。也就是从上到下。
目标阶段，该阶段仅包括目标节点。
冒泡阶段。冒泡阶段包括从目标节点的父节点返回到最高节点的行程中遇到的节点。也就是从下到上。

事件触发

事件的触发类型基本有两种，冒泡型和捕获型。
冒泡型：IE采用的事件类型（IE只支持冒泡），事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
捕获型：与冒泡刚好相反，事件按照从最不特定的事件目标（window）到最特定的事件目标的顺序触发。
注意：IE和opera的事件传播只有冒泡过程，没有捕获过程，所以IE的事件传播只能是冒泡，其他浏览器则是标准的事件流，可以选择事件的触发是在捕获还是冒泡。

addEventListener和attachEvent

addEventListener：W3c标准的事件绑定函数，有三个参数，第一个为事件类型，第二个为执行方法，第三个是一个布尔值，true表示事件在捕获阶段绑定，false表示在冒泡阶段绑定。 attachEvent：IE下采用的事件绑定函数，只有两个参数，第一个为事件类型，第二个为执行方法，所以事件只能在冒泡阶段绑定。

阻止冒泡

同样分为IE和其他。
在其他浏览器下（W3C标准），event.stopPropagation（）阻止冒泡。
注意：jquery下委托是无法阻止，也就是说，live()，delegate(),on()绑定的函数并不是冒泡，无法通过这个函数阻止。 IE下，则是通过设置cancelBubble属性来阻止冒泡，window.event.cancelBubble = true;

setCapture

IE下有个setCapture （FF下也有类似的captureEvents(Event.eventType) ）， 通过setCapture,所有的鼠标事件都会触发目标元素的事件，就是说你在任何地方触发鼠标事件，最后都相当于触发目标元素的鼠标事件。 document.getElementById(“btn”).setCapture(); 通过 releaseCapture或者alert释放。

z-index，元素的堆叠

正常文档流（没有设置position或者浮动）

一般情况下（没有设置position或者浮动），正常的文档流是不会产生堆叠现象的，当然并不是不会堆叠，设置负边距的时候，会产生堆叠，此时只有一条规则：

位于文档流后面的节点会遮盖前面的节点

定位元素的堆叠

明确几点：

1.z-index只对定位元素有效（relative, absolute 或者 fixed） 。
2.这里的堆叠只针对同级元素，也就是属于同一个堆叠上下文的元素。
3.向上追溯找不到含有z-index值的父元素的情况下，则可以视为自由的z-index元素，它可以与父元素的同级兄弟定位元素或其他自由的定位元素来比较z-index的值

然后根据以下顺序决定同一层元素的堆叠顺序（从后到前）：

层的根元素
被定位了得元素并且z-index值为负，相同z-index的情况下，按照HTML元素的书写顺序排列，下面相同。
没有被定位的元素
被定位的元素，并且z-index值为auto（默认状态）
被定位了的元素并且z-index值为正。

其他影响堆叠的因素

1.float： 在定位元素的后面，不定位元素的前面。
2.opacity:使用了小于1的opacity属性的层，也比普通层更高层次并且和指定 position 的层同层.
3.transform:比普通层和float层高，但是比opacity和position层低。

总的来说
层级的顺序简单来说是这样的：

普通元素< float<transform<opacity = 未设定z-index的定位元素<z-index

js异步延迟加载

正常情况下：

浏览器遇到script标签会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。同时是同步的也就是说在脚本执行完之前不加载后面的页面。
这也是我们为什么把script标签放在body之后的原因。

异步加载(只对外链的script有效)

1.async
能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立刻执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行，对于有依赖的脚本这个并没有什么用。

2.defer
同样的异步加载脚本，加载与async无太大区别，但是脚本执行在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。也就是说浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行。

tips：基本所有的浏览器都支持defer，但是async属性是html5新加的，IE似乎并不支持。