【博学谷学习记录】超强总结，用心分享前端|其他事件

目录

其他事件

页面加载事件

页面滚动事件

scrollLeft和scrollTop

scrollTo()

页面尺寸事件

clientWidth和clientHeight

元素尺寸与位置

Dom节点&移动端滑动

日期对象

日期对象方法

时间戳

三种方式获取时间戳：

---

其他事件

页面加载事件

加载外部资源（如图片、外联css和JavaScript等）加载完毕时触发的事件

事件名：load

监听页面页面所有资源加载完毕：给window添加load事件

window.addEventLister(‘load’,function() { // 执行的操作})

不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded

监听页面DOM加载完毕：给document添加DOMContentLoaded事件

document.addEventListener(‘DOMContentLoaded’,function() { // 执行的操作 })

页面滚动事件

滚动条在滚动的时候持续触发的事件

很多网页需要检测用户把页面滚动到某个区域后做一些处理， 比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：给window或document添加scroll事件

Window.addEventListener(‘scroll’,function() {  // 执行的操作 })

监听某个元素的内部滚动直接给某个元素加即可

scrollLeft和scrollTop

scrollLeft和scrollTop （属性）

获取被卷去的大小，获取元素内容往左、往上滚出去看不到的距离，这两个值是可读写的

尽量在scroll事件里面获取被卷去的距离

scrollTo()

scrollTo() 方法可把内容滚动到指定的坐标

语法：元素.scrollTo(x, y)

页面尺寸事件

会在窗口尺寸改变的时候触发事件：

事件名：resize

window.addEventListener(‘resize’,function() {  // 执行的代码 })

clientWidth和clientHeight

clientWidth和clientHeight

获取元素的可见部分宽高（不包含边框，margin，滚动条等）

元素尺寸与位置

就是通过js的方式，得到元素在页面中的位置

获取宽高：

获取元素的自身宽高、包含元素自身设置的宽高、padding、border

offsetWidth和offsetHeight  

获取出来的是数值,方便计算

注意: 获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0

获取位置：

获取元素距离自己定位父级元素的左、上距离

1. offsetLeft和offsetTop  注意是只读属性
2.  element.getBoundingClientRect()

方法返回元素的大小及其相对于视口的位置

Dom节点&移动端滑动

日期对象

日期对象：用来表示时间的对象

作用：可以得到当前系统时间

在代码中发现了 new 关键字时，一般将这个操作称为实例化

创建一个时间对象并获取时间

获得当前时间：const date = new Date()

获得指定时间：const date = new Date(‘年-月-日 小时：分钟：秒’)

日期对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为 0 ~ 11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为 0 ~ 6
getHours()	获取小时	取值为 0 ~ 23
getMinutes()	获取分钟	取值为 0 ~ 59
getSeconds()	获取秒	取值为 0 ~ 59

时间戳

使用场景： 如果计算倒计时效果，前面方法无法直接计算，需要借助于时间戳完成

什么是时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式

算法：

将来的时间戳  -  现在的时间戳  =  剩余时间毫秒数  

剩余时间毫秒数 转换为 剩余时间的 年月日时分秒 就是 倒计时时间

比如    将来时间戳  2000ms  -  现在时间戳 1000ms   =  1000ms

1000ms 转换为就是   0小时0分1秒

三种方式获取时间戳：

1. 使用 getTime()  方法

const date = new Date()

console.log(date.getTime())

1. 简写  +new Date()

console.log(+new Date())

1. 使用 Date.now()

console.log(Date.now())

无需实例化

但是只能得到当前的时间戳， 而前面两种可以返回指定时间的时间戳