js中offset、scroll、event、client的区别和使用
用一句话概述：offset用于获取元素的实际显示尺寸 ， scroll用于获取滚动后全部尺寸 ， client用于获取不包括滚动条的实际显示尺寸，event用于获取鼠标的坐标位置。下面就详细介绍它们之间的使用和区别
一、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.eventevent具有一些属性：
（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以上，说到event时提到过冒泡类型，在此，和大家解释一下什么是冒泡类型。冒泡：底层向上级传递。当一个元素上的事件被触发时，同样的事件在该元素的所有祖先元素中也被触发。捕获：上级向底层。说到冒泡和捕获，百年不得不说到事件监听器，事件监听器的语法：事件源.addEventListener(‘事件类型’,事件驱动程序,是否捕获，默认为false,即为不捕获，不捕获则为冒泡)。取消冒泡的方式:
怪异模式(无DTD约束):document.body.clientWidth/document.body.clientHeight
（1）IE10-写法：event.cancelBubble=true;
（2）w3c规定写法:event.stopPropagation();
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
