js中offset、scroll、event、client的区别和使用

更新日期: 2018-08-17阅读: 3.2k标签: js知识分享

复制链接

新浪微博

QQ 好友

扫一扫分享

用一句话概述：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.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();

链接: https://fly63.com/article/detial/1016