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).onscroll=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();