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

时间: 2018-08-17阅读: 1646标签: js知识

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


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1016

js记录用户行为浏览记录和停留时间

原来是想使用 cookie 来记录,但是考虑到 cookie 所能记录的数据最大为 4k ,可能不够用。于是使用了 HTML5 的 localStorage (最大数据 5M )来存储( IE8 以上浏览器支持)。这里使用到了 jquery.cookie 的插件,所以页面要引入 jquery 和 jquery.cookie 。

js中的相等性判断

Js提供了三种不同的比较操作符===,==,Object.is。ECMAScript 提供了四种比较操作符:非严格相等(==)、严格相等(===)、零值相等、同值相等。

你所忽略的js隐式转换

你有没有在面试中遇到特别奇葩的js隐形转换的面试题,第一反应是怎么会是这样呢?难以自信,js到底是怎么去计算得到结果,你是否有深入去了解其原理呢?下面将深入讲解其实现原理。

用js打印hello world,JavaScript中你不知道的实现方式

如何使用js很装X的打印“hello world”,代码长短不重要,下面就整理一些实现方式。

javascript怎么输出?

JavaScript怎么输出?输出方式有哪些?下面本篇文章就给大家介绍JavaScript的几种输出方式。window.alert()方法用于显示带有一条指定消息和一个【确认】 按钮的警告框。

原生js实现数组随机排列(数组乱序)的方法.【快速洗牌算法】

在开发中遇到这样的问题,需要将一组已知数组的顺序打乱,按照以前和现在的做法,总结了以下方法。

10个JavaScript难点:能够读懂这篇博客的JavaScript开发者,运气不会太差…

10个JavaScript难点包括:立即执行函数,闭包,使用闭包定义私有变量,prototype,模块化,变量提升,柯里化,apply, call与bind方法,Memoization,函数重载

javascript不可变性是什么?

不可变性即某个变量在进行了某个操作之后,其本身没有发生变化,比如对于字符串而言,对字符串的任何操作都会改变字符串本身的值,而是在字符串的基础上复制出来一个然后再改变,这样我们就说是不可变的

base91 for javascript

原理和 base64 是一样的,ASCII 共有94个可打印字符,base64 使用了其中 64 个,base91 使用了 91 个。

打造自己的JavaScript武器库

作为战斗在业务一线的前端,要想少加班,就要想办法提高工作效率。这里提一个小点,我们在业务开发过程中,经常会重复用到日期格式化、url参数转对象、浏览器类型判断、节流函数等一类函数,这些工具类函数

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!