实习知识点总结(2)

实习知识点总结
,

Css中display:inline-block

会将对象呈递为内联对象，但是对象的内容作为块对象呈递。也就是说，可以给该内联对象设置宽度和高度，和周围的元素保持在一行，允许空格。
兼容性：
主流浏览器均支持inline-block。
IE6、IE7不识别inline-block，可以使用zoom:1触发layout，实现inline-block。（“Layout”是一个 IE/Win的私有概念，它决定了一个元素如何显示以及约束其包含的内容、如何与其他元素交互和建立联系、如何响应和传递应用程序事件/用户事件等。）

1
2
3
4
5
6
7
8
9
10
11
12
13
通过.clearfix来清除浮动
// 在类名为”clearfix”的元素内最后面加入内容
.clearfix:after {   
// 内容为”.”就是一个英文的句号而已。也可以不写。 
content: "."; 
// 加入的这个元素转换为块级元素。
display: block;
// 清除左右两边浮动
  clear: both;  
// 可见度设为隐藏。和display:none;不同。visibility:hidden;仍然占据空间，只是看不到而已； 
visibility: hidden; 
} 
.clearfix { *zoom:1;} // IE6/IE7不支持:after伪类，利用zoom:1触发layout实现清除浮动。

事件冒泡与事件捕获

事件冒泡即从事件开始由最具体的节点接收，然后逐级向上传播到较为不具体的节点。
比如点击了一个

元素，click事件会按如下顺序传播：

1
<div> ---> <body> ---> <html> ---> document

事件捕获则先从最不具体的节点开始接收，最具体的节点最后接收到事件。
比如点击了一个

元素，click事件会按如下顺序传播：

1
Document ---> <html> ---> <body> ---> <div>

JavaScript的 addEventListener()方法

这个方法为事件目标注册事件处理程序。
addEventListener()包含三个参数：要处理的事件名、事件处理程序的函数、布尔值。
布尔值通常传false，表示在冒泡阶段调用事件处理程序。传true，那么函数将在事件捕获阶段处理程序。
相对于直接设置的文档元素事件处理程序的属性，该方法的优点可以对同一对象、同一事件注册多个处理程序。多个处理程序会按照添加它们的顺序触发。
addEventListener()添加的事件处理程序只能使用removeEventListener()移除。并且要求传入的参数与添加事件处理程序的参数一致才行。
但是不兼容IE8及以下，IE有专门的事件处理程序：attachEvent()和detachEvent();但是由于IE8及更早的版本支持事件冒泡，所以用通过该方法添加的事件处理程序会添加到冒泡阶段。并且事件处理程序的执行顺序与其添加顺序相反。