JS对象：offset、scroll、event、client

前言就不多说了，还是直接进入正题吧。今天的内容看上去很多，但实际上很多内容都大相径庭。
一、offset
（1）offsetWidth:检测盒子的高度，offsetWidth=width+padding+border
（2）offsetHeight:检测盒子的高度,offsetHeight=Height+padding+border
（3）offsetLeft:检测盒子距离有定位的父元素的左边的距离,不包含border，但包含padding，当父元素无定位时，则是距离body
（4）offsetRight:检测盒子距离有定位的父元素的右边的距离,不包含border，但包含padding，当父元素无定位时，则是距离body
（5）offsetTop:检测盒子距离有定位的父元素的上边的距离,不包含border，但包含padding，当父元素无定位时，则是距离body
（6）offserBottom:检测盒子距离有定位的父元素的下边的距离,不包含border，但包含padding，当父元素无定位时，则是距离body
二、scroll
（1）scrollWidth:检测盒子的内容的宽,不包括border
（2）scrollHeight:检测盒子的内容的高，不包括border
（3）scrollTop:被卷去的上部部分
（4）scrollLeft:被卷去的左部部分
（5）onscroll():滚轮事件，只要滚动，无论是向上、下、左、右皆会触发，大多由window触发，语法：$(window).οnscrοll=function(){ 代码块 }
**注意：scroll具有兼容性，兼容写法为(以scrollTop为例)：
Google：document.body.scrollTop；
FireFox、IE:document.documentElement.scrollTop;**
三、event
event具有兼容性，IE6、7、8的兼容写法为:window.event
event具有一些属性：
（1）bubbles:是否为冒泡类型
（2）button:鼠标哪一个按钮被点击
（3）pageX/pageY：相对body，鼠标的坐标
（4）screenX/screenY:相对浏览器，鼠标的坐标
（5）clientX/clientY:相对浏览器的可视区域，鼠标的坐标
（6）target：事件发生的源头
（7）type:事件类型
四、client
（1）clientWidth:页面可视区域的宽,clientWidth=width+padding
（2）clientHeight：页面可视区域的高,clientHeight=height+padding
注意：client具有兼容性，兼容写法：
IE9+:window.innerWidth/window.innerHeight
标准模式(有DTD约束):document.documentElement.clientWidth/document.documentElement.clientHeight
怪异模式(无DTD约束):document.body.clientWidth/document.body.clientHeight
以上，说到event时提到过冒泡类型，在此，和大家解释一下什么是冒泡类型。冒泡：底层向上级传递。当一个元素上的事件被触发时，同样的事件在该元素的所有祖先元素中也被触发。捕获：上级向底层。说到冒泡和捕获，百年不得不说到事件监听器，事件监听器的语法：事件源.addEventListener(‘事件类型’,事件驱动程序,是否捕获，默认为false,即为不捕获，不捕获则为冒泡)。取消冒泡的方式:
（1）IE10-写法：event.cancelBubble=true;
（2）w3c规定写法:event.stopPropagation();