目录
目录 2
今日内容： 4
第1章 第三大家族client 4
1.1 主要成员 4
1.2 三大家族区别（三大家族总结） 5
1.2.1 Width和height 5
1.2.2 top和left 5
1.3 client家族特殊用法之:检浏览器宽/高度(可视区域) 6
1.4 Onresize事件 6
1.5 案例：根据浏览器可视区域大小，给定背景色 6
1.6 事件总结 6
1.7 获得屏幕宽高 7
第2章 冒泡 7
1.8 阻止冒泡 7
1.9 addEventListenner(参数1，参数2，参数3) 8
1.10 案例 8
1.10.1 点击空白隐藏模态框 8
1.10.2 选定内容分显示分享 9
第3章 缓动框架 9
1.11 封装框架遇到的两个问题 9
1.12 获取任意类型的CSS样式的属性值 9
1.13 开闭原则 10
1.14 回调函数 10
1.15 案例（缓动框架的应用） 11
1.15.1 手风琴案例 11
1.15.2 360关闭广告 11
今日内容：
client家族
冒泡
案例：点击空白处隐藏模态框/选中文字，分享微博
缓动框架
案例：360广告向下关闭/手风琴
第1章 第三大家族client
1.1 主要成员
1、clientWidth 获取网页可视区域宽度（两种用法）
clientHeight 获取网页可视区域高度（两种用法）
调用者不同，意义不同：
盒子调用： 指盒子本身。
浏览器调用： 可视区域大小。
2、clientX 鼠标距离可视区域左侧距离（event调用）
clientY 鼠标距离可视区域上侧距离（event调用）
1.2 三大家族区别（三大家族总结）
1.2.1 Width和height
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度（不包含border）
scrollHeight = 内容高度（不包含border）
1.2.2 top和left
offsetTop/offsetLeft ：
调用者：任意元素。(盒子为主)
嘛作用：距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:
调用者：document.body.scrollTop/.....(window)
嘛作用：浏览器无法显示的部分（被卷去的部分）。
clientY/clientX:
调用者：event.clientX(event)
嘛作用：鼠标距离浏览器可视区域的距离（左、上）。
1.3 client家族特殊用法之:检浏览器宽/高度(可视区域)
1.4 Onresize事件
只要浏览器的大小改变，哪怕1像素，都会触动这个事件。
1.5 案例：根据浏览器可视区域大小，给定背景色
1.6 事件总结
区分：
1.window.onscroll 屏幕滑动
2.window.onresize 浏览器大小变化
3.window.onload 页面加载完毕
4.div.onmousemove 鼠标在盒子上移动
（注意：不是盒子移动！！！）
5.onmouseup/onmousedown == onclick
1.7 获得屏幕宽高
window.screen.width
分辨率是屏幕图像的精密度，指显示器所能显示的像素有多少。
我们的电脑一般：
横向1280个像素点，
纵向960个像素点。
我们看电影的时候是满屏和半屏的，就是这。
第2章 冒泡
事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。(BUG)
（本来应该一人做事一人当，结果，我做错了事情，你去告诉我妈）
什么是冒泡：子元素事件被触动，父盒子的同样的事件也会被触动。
取消冒泡就是取消这种机制。
1.8 阻止冒泡
w3c的方法是：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下则是使用：event.cancelBubble = true
兼容代码如下：
var event = event || window.event;
if(event && event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble = true;
}
1.9 addEventListenner(参数1，参数2，参数3)
调用者是：事件源。 参数1：事件去掉on 参数2 ：调用的函数
参数3：可有可无。没有默认false.false情况下，支持冒泡。True支持捕获。
1.10 案例
1.10.1 点击空白隐藏模态框
Document事件的绑定，无论绑定什么事件，只要事件被出发，传递过来的应该是指定的元素本身，而不是document。
第3章 缓动框架
1.11 封装框架遇到的两个问题
原有的方法：div.style.width :这个方法比较固定，不能用变量或者字符串的形式更换属性，不方便我传值获取属性，和给属性赋值。
属性值的获取和属性的赋值
div.style["width"] = "5000px";
可以通过传字符串或者变量的方式获取和赋值属性。
缺点：他的操作完全是对行内式CSS来操作的。赋值的时候毫无问题。但是，获取值的时候有问题了。
1.12 获取任意类型的CSS样式的属性值
Div.style.width
div.currentStyle.width
Window.getComputedStyle(div,null).width;
他们的公共使用变量或者字符串获取属性值的方法都是：去电属性和点，然后加上中括号和属性的字符串形式。
Div.style[“width”];
div.currentStyle[“width”];
Window.getComputedStyle(div,null)[“width”];
1.13 开闭原则
定义一个变量。数据可以修改。但是，只能修改成为两个值。
1.14 回调函数
程序执行完毕，在次执行的函数。
在函数中给指定的函数定义一个形参，然后程序执行到最后，调用这个形参后面加一个括号。
1.15 案例（缓动框架的应用）
1.15.1 手风琴案例
鼠标放上去的时候，该li变大的速度太快，而其他的li变小的速度没有跟上。导致盒子右侧出现了空白。
1.15.2 360关闭广告