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