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

                  目录
目录	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关闭广告