1. client

clientTop、clientLeft：

clientTop：盒子的上boder

clientLeft：盒子的左border

clientWidth与clientHeight

1、在有DTD情况下：

document.body.clientWidth、document.body.clientHeight：显示的是body的宽和高，document.documentElement.clientWidth、document.documentElement.clientHeight：显示的是body可视范围的宽和高，

2、在无DTD情况下：

document.body.clientWidth、document.body.clientHeight显示的是body可视范围的宽和高；

document.documentElement.clientWidth、document.documentElement.clientHeight显示的是body的高和body可视范围的宽（IE中显示的都是body可视范围的宽和高）

3、不管有没有DTD：

window.innerWidth、window.innerHeight：显示的都是浏览器可视范围的宽和高，包括浏览器的头部和滚动条部分（IE678无法识别window.innerWidth）

调用者的区别：

1、clientTop、clientLeft、clientWidth、clientHeight调用者是元素

2、clientX、clientY调用者是event对象

client、scroll、offset区别：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

scrollWidth = 内容宽度（不包含border）

scrollHeight = 内容高度（不包含border）

注意事项：IE67，scrollHeight即使不超出盒子，它的值也是内容的高度

兼容写法：

注意事项：window.innerWidth、window.innerHeight：显示的都是浏览器可视范围的宽和高，包括浏览器的头部和滚动条部分

2. Window 尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于I E、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeight
document.documentElement.clientWidth

或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：

兼容写法
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

新事件浏览器大小变化事件（浏览器哪怕大小变化1px也会触动这个事件）
window.onresize = function () {
document.title = client().width + " "+ client().height;
}

3. 判断浏览器大小决定显示方式

秀一下：

源码：

4.判断屏幕大小

    document.title = window.screen.width + "    "+ window.screen.height;

5. 冒泡初体验

首先我们要先知道什么是冒泡。
假设有两个盒子box1和box2,box1包含box2。它们两同时都有一个相同的事件就是onclick，当我们点击box2时，它的onclick事件会执行，但随后它的父元素box1的onclick也会被执行，这就是冒泡。
捕获正好和冒泡相反。

看图

下面代码里面的false是允许冒泡，true是允许捕获。如果不写默认是false;

   box1.addEventListener("click", function () {
       alert("我是box1");
   },false);

   box2.addEventListener("click", function () {
       alert("我是box2");
   },false);

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

知识点：

冒泡顺序
IE 6.0:
div -> body -> html -> document
其他浏览器:
div -> body -> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload、onmouseenter
onmouseleave

阻止冒泡的方法
假如想在box2上面阻止冒泡。
w3c的方法是：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下则是使用：event.cancelBubble = true//现在已废弃
兼容代码如下：
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}

6. 模态框取消

点击模态框外，让整个模态框消失。
效果展示：

点击背景也能让其消失

源码：

隐藏模态框小结
判断当前对象
IE678 event.srcElement（事件源）
火狐/谷歌等 event.target（事件源）
兼容写法获取元素ID：
var event = event || window.event;
var targetId = event.target ? event.target.id : event.srcElement.id;

7. 事件委托

普通的事件绑定，没有办法为JS新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托！

源代码：




    
    
    




    我是土著li
    我是土著li
    我是土著li
    我是土著li
    我是土著li
    我是土著li

事件委托小结
(先绑定，后创建的元素没有事件)
阻止冒泡，阻止自己像父系盒子冒泡。
所有的泡泡冒泡到阻止位置停止向上冒泡
event.target是在事件被触动的时候把事件源绑定到event的target属性中。而之前的target是我们自定义的一个变量触动

8.缓动动画的完善(加强)

之前封装的动画缺点：

1.只能放入一个属性。（一个方法只能操作一个属性）
2.只能获取行内式，不能获取内嵌和外链样式。导致我们获取left值的时候,用offsetLeft模拟。
3.一次性放入多个属性值。

先看一下获取元素属性值和赋值方法
给属性赋值：（既能获取又能赋值）
div.style.width 单个赋值
div.style[“width”] 变量赋值
获取属性值：（只能获取）
window.getComputedStyle(div,null).width;单个获取
window.getComputedStyle(div,null)[“width”];变量获取
div.currentStyle.width; IE678
div.currentStyle[“width”]; IE678

1.只能放入一个属性。（方法只能操作一种属性）的解决办法。
源码：

2.让多个属性同时使用+开闭原则清除定时器+回调函数
源码：

9.手风琴案例

效果是这样的：

手风琴.gif

图片width:800,高度随意。
源码：

9.模拟360开机弹窗关闭