元素可视区Client系列

client就是客户端，使用client系列的相关属性来获取元素可视区的相关信息，通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding、内容区的高度，不含边框，返回数值不带单位

重点记忆：clientWidth 、clientHeight

案例：淘宝flexible.js源码分析

立即执行函数(function() {}) () 字面意思理解：不用调用函数可以直接使用函数，里面所有的变量都是局部变量

注意作用：创建一个独立的作用域，避免了命名冲突问题

下面三种情况都会刷新页面都会触发load事件

a标签的超链接
1. F5或者刷新按钮（强制刷新）
2. 前进后退按钮
3. 前进后退按钮
  
  但是火狐中，有个特点，有个‘往返缓存’ 这个缓存中保存着页面数据，还保存了DOM和JS的状态，实际上是将整个页面都保存在了内存里
所以此时后退按钮不能刷新页面

此时可以使用pageshow事件来触发，这个事件在页面显示时触发，无论页面是否来自缓存，在重新加载页面中，pageshow会在load事件触发后触发，根据事件对象的persisted来判断是否缓存中的页面触发的pageshow事件，注意这个事件给window添加

flexi.js分析

(function flexible(window, document) {// 获取的html 的根元素var docEl = document.documentElement// dpr 物理像素比var dpr = window.devicePixelRatio || 1// adjust body font size  设置我们body 的字体大小function setBodyFontSize() {// 如果页面中有body 这个元素 就设置body的字体大小if (document.body) {document.body.style.fontSize = (12 * dpr) + 'px'} else {// 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body// 的字体大小document.addEventListener('DOMContentLoaded', setBodyFontSize)}}setBodyFontSize();// set 1rem = viewWidth / 10    设置我们html 元素的文字大小  将屏幕划分为10等份function setRemUnit() {var rem = docEl.clientWidth / 10docEl.style.fontSize = rem + 'px'}setRemUnit()// reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小window.addEventListener('resize', setRemUnit)// pageshow 是我们重新加载页面触发的事件 照顾了大部分的页面 后退前进也能重新加载页面window.addEventListener('pageshow', function(e) {// e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小if (e.persisted) {setRemUnit()}})// detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法if (dpr >= 2) {var fakeBody = document.createElement('body')var testElement = document.createElement('div')testElement.style.border = '.5px solid transparent'fakeBody.appendChild(testElement)docEl.appendChild(fakeBody)if (testElement.offsetHeight === 1) {docEl.classList.add('hairlines')}docEl.removeChild(fakeBody)}
}(window, document))

元素滚动scroll 系列

scroll就是滚动的意思，使用scroll系列的相关属性可以动态的得到该元素的大小、滚动距离等

scroll系列属性	作用
element.scrollTop	返回被卷去的上侧距离，返回数值不带单位
element.scrollLeft	返回被卷去的左侧距离，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
element.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

实际开发中使用最多的是scrollTop scrollLeft 被卷去的距离就是scrollTop值

案例：仿淘宝固定右侧侧边栏

原先侧边栏是绝对定位
当页面滚动到一定位置，侧边栏改为固定定位
页面继续滚动，会让返回顶部显示出来

分析：

需要用到页面滚动事件scroll因为页面滚动，所以事件源是document
滚动到某个位置，就是判断页面被卷上去的值
页面被卷去的头部，可以通过window.pageOffset 获得 如果被卷上去的左侧window.pageXOffset
注意，元素被卷曲的头部是element.scrollTop 如果是页面被卷曲的头部则是window.pageYOfsset

需要注意的是，页面被卷去的头部，有兼容性问题，因此被卷去的头部通常有如下几种写法：

声明了DTM 使用document.documentElement.scrollTop
未声明DTD 使用document.body.scrollTop
新方法window.pageYoffset 和window.pageXOffset, IE9开始支持

function getScroll () {

return {

left:window.pageXOffset || docuementElement.scrollLeft || document.bodyScrollLeft ||0

left:window.pageYOffset || docuementElement.scrollTop || document.bodyScrollTop ||0

}

}
使用的时候 getScroll().left

三大系列总结

三大系列大小对比	作用
element.offsetWidth	返回自身包括padding、边框、内容区的宽度，返回数值不带单位
element.clientWidth	返回自身包括padding、内容区的宽度，不含边框，返回数值不带单位
element.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位

他们主要用法：

offset系列经常用于获得元素位置 offsetLeft.offsetTop
client经常用于获取元素大小 clientWidth clientHeight
scroll经常用于获取元素滚动距离 scrollTop scrolLeft

注意：页面滚动的距离通过window.pageXOffset 获得

mouseenter 和 mouseover 区别

mouseenter 鼠标事件

当鼠标移动（经过）到元素上时就会触发mouseener 事件
类似mouseover 他们两者之间的差别是
mouseover 鼠标经过自身盒子会触发，经过子盒子还会触发，mouseenter会经过自身盒子触发
之所以这样，就是因为moseenter不会冒泡
跟mouseenter搭配鼠标离开mouseleave 同样不会冒泡

JS学习之BOM | client | scroll相关推荐

JS学习之BOM | 常见网页特效 | 轮播图 | 返回顶部 | 筋斗云案例
封校后终于回家咯给即将中考的弟弟加油鼓劲,下午还和涛哥约会但是时间太短了.继续学习吧许个愿,让我中奖让我中奖让我中奖常见网页特效案例案例:网页轮播图(必须掌握) 轮播图装的图片和外面盒子一样大小 ...
js 三大家族（offset/scroll/client）
<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8" ...
.net label在父容器中占两行显示_十分钟快速了解 JS 中的 offset、scroll、client
经常碰到offset.scroll.client这几个关键字,每次都要各种实验,这里总结一下. 两张图镇楼,随时翻阅 1. offset offset 指偏移,包括这个元素在文档中占用的所有显示宽度, ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
node.js学习总结：node.js的内置模块，模块化，npm与包 express，前后端身份认证 JWT认证机制
node.js学习总结什么是node.js node.js的内置模块 fs系统模块 path路径模块 http模块模块化 npm与包 express express路由 express+mysql ...
node.js学习-第一章节
目录前言学习NodeJS的意义 01-nodejs入门 1.2-什么是nodejs 1.3-Node.js环境安装 1.3.1-如何确认当前电脑是否已经安装了Node环境 1.3.2-npm介绍与 ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
javascript从入门到跑路-----小文的js学习笔记目录
** javascript从入门到跑路-----小文的js学习笔记(1)---------script.alert.document.write() 和 console.log 标签 javascri ...
千锋Node.js学习笔记
千锋Node.js学习笔记文章目录千锋Node.js学习笔记写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...

JS学习之BOM | client | scroll