client家族

#####主要成员

clientWidth 获取网页可视区域宽度（两种用法） clientHeight 获取网页可视区域高度（两种用法）

调用者不同，意义不同：
```
 盒子调用：指盒子本身。
 body/html调用：可视区域大小。
```
clientX 鼠标距离可视区域左侧距离（event调用） clientY 鼠标距离可视区域上侧距离（event调用）
clientTop/clientLeft 盒子的border宽高

#####三大家族区别（三大家族总结）

width和height clientWidth = width + padding clientHeight = height + padding

offsetWidth = width + padding + border offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border） scrollHeight = 内容高度（不包含border）注意scrollHeight：标准浏览器中，一般是height+padding的值，如果内容高度超出了盒子的高度，高度为盒子高+超出盒子的内容高；IE8（不含IE8）以下，为内容高度，不是盒子高度。
top和left offsetTop/offsetLeft ：调用者：任意元素。(盒子为主) 作用：距离带有定位父系盒子的距离。

scrollTop/scrollLeft:(盒子也可以调用，必须有滚动条) 调用者：document.body.scrollTop/…..(window) 作用：浏览器无法显示的部分（被卷去的部分）。

clientY/clientX:（clientTop/clientLeft 值的是border）调用者：event.clientX(event) 作用：鼠标距离浏览器可视区域的距离（左、上）。

#####client家族特殊用法之:检浏览器宽/高度(可视区域) ie9及其以上的版本 window.innerWidth/Height
标准模式（有DTD）（“CSS1Compat”） document.documentElement.clientWidth document.documentElement.clientHeight 怪异模式（没有DTD） document.body.clientWidth document.body.clientHeight

封装：类似scroll();

function client(){
    if(window.innerWidth !== undefined){
        return{
            "width":window.innerWidth,
            "height":window.innerHeight
        }
    }else if(window.compatMode === "CSS1Compat" ){
        return{
            "width":document.documentElement.clientWidth,
            "height":document.documentElement.clientHeight
        }
    }else{
        return{
            "width":document.body.clientWidth,
            "height":document.body.clientHeight
        }
    }
}

Onresize事件只要浏览器的大小改变，哪怕1像素，都会触动这个事件。

案例：根据浏览器可视区域大小，给定背景色

#####获得屏幕宽高 window.screen.width 分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。我们的电脑一般：横向1280个像素点，纵向960个像素点。

事件传播机制（冒泡he捕获）

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发(前提是祖先元素也绑定的该事件)，这一过程被称为事件冒泡。冒泡是事件从原始元素开始一直冒泡到DOM树的最上层。

事件传播的三个阶段是：捕获、冒泡和目标阶段事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签

冒泡顺序： IE 6.0: div -> body -> html -> document 其他浏览器: div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload、onmouseenter onmouseleave。查看一个事件是否冒泡：

//返回true，支持冒泡
document.on事件名 = function(eve){
    eve = eve||window.event;
    console.log(eve.bubbles);
}

阻止冒泡： w3c的方法是（火狐、谷歌、IE11）：event.stopPropagation() IE10以下则是使用：event.cancelBubble = true 兼容代码如下：

var event = event || window.event;
if(event && event.stopPropagation){
    event.stopPropagation();
}else{
    event.cancelBubble = true;
}

缓动框架封装

变量属性获取/赋值方法给属性赋值：（既能获取又能赋值） div.style.width 单个赋值 div.style[“width”] 变量赋值

获取属性值：（只能获取） div.currentStyle.width; IE678 单个获取 window.getComputedStyle(div,null).width; div.currentStyle[“width”]; IE678 变量获取 window.getComputedStyle(div,null)[“width”];
```
 getComputedStyle(arg1,arg2)
 参数1：获取属性的元素。
 参数2：伪元素，C3学习。
```
```
  //兼容方法获取元素样式
     function getStyle(ele,attr){
         if(window.getComputedStyle){
             return window.getComputedStyle(ele,null)[attr];
         }
         return ele.currentStyle[attr];
     }
```
开闭原则
回调函数

案例：手风琴效果、360关闭广告