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

时间: 2018-08-17阅读: 1774标签: 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不同数据类型下的toString()与toLocaleString()的输出差异

toString()与toLocaleString()方法主要针对对象Object转换为字符串,如果是基本类型调用它们的时候,先会把基本类型实例化为对应的对象类型,然后在转换为字符串。这篇文章主要讲解不同数据类型下的toString()与toLocaleString()的输出差异。

为什么JavaScript开发如此疯狂

Web开发中其他一切对你而言都是小菜一碟,但当你深入探究JavaScript的时候,不免有一种“众人皆醒你独醉”的悲壮——好像其他人都知道你不知道的一些大的基础的知识内容,并且这些内容可以帮助你理解所有知识

js判断是否为IE浏览器的多种方法总汇

这篇文章主要整理通过js来判断浏览器是否为IE的多种方法。使用js脚本判断浏览器是否为ie,这里分享六种判断是否为ie的方法,有需要的朋友参考学习下。

JS中的词法作用域(静态作用域)和动态作用域

首先说明一下,JavaScript没有用动态作用域概念,但 this 机制却和动态作用域类似!JavaScript是通过作用域链的方式进行变量查找的,而JS作用域链是词法作用域,也就做静态作用域!词法作用域:在函数声明(定义)时确定的

js原型链,Javascript重温OOP之原型与原型链

js的原型链,得出了一个看似很简单的结论。对于一个对象上属性的查找是递归的。查找属性会从自身属性(OwnProperty)找起,如果不存在,就查看prototype中的存在不存在。

JavaScript中公有、私有、静态、受保护的属性和方法

在开发中,我们需要限制某些属性和方法的暴露程度,使得它们不能通过对象实例本身被访问、修改或调用。要了解js面向对象,就必需先了解js中什么是公有、私有、静态、受保护。

前端与编译原理——用JS写一个JS解释器

说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

js函数防抖与函数节流

直接绑定函数到scroll事件是非常错误的决定,当用户滚动页面时,页面可能会变得非常慢甚至未响应。而函数防抖和函数节流是解决这个问题的一种方式,通过限制需要经过的事件,直至再次调用函数,在处理一些高频率触发的 DOM 事件的时候,它们都能极大提高。

JavaScript中的魔幻代理Proxy

什么是 JavaScript 代理?通过 Proxy 我们可以拦截并改变一个对象的几乎所有的根本操作,包括但不限于属性查找、赋值、枚举、函数调用等等。利用 Proxy,我们可以拦截并不存在的属性的读取

TS与JS中的Getters和Setter究竟有什么用?

在本文中,我们讨论了getter 和 setter 在现代 Web 开发中的实用性。它们有用吗?什么时候使用它们是有意义的?尽管我不同意 getter 和 setter 完全是一个反模式。但它们在几种情况下能带来更多的实用性。

点击更多...

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