文章目录

一、滚动事件和加载事件
- 1.1 滚动事件
- 1.2 加载事件
二、三大家族
- 2.1 scroll家族
- 2.2 offset家族
- 2.3 client家族

一、滚动事件和加载事件

1.1 滚动事件

当页面滚动时触发的事件

事件名：scroll

样例，监听整个页面滚动：

window.addEventListener('scroll',funtion(){//执行操作
})

可以给window或者document添加scroll事件

1.2 加载事件

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

事件名：load

监听页面所有资源加载完毕

window.addEventListener('load',function(){//执行操作
})

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

事件名：DOMContentLoaded

监听页面DOM加载完毕

document.addEventListener('DOMContentLoaded',function(){//执行操作
})

两个加载事件的区别

load事件
给window加，监听整个页面资源，

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

二、三大家族

2.1 scroll家族

作用：scroll可以检测页面滚动的距离

获取宽高

获取元素的内容总宽高（不包含滚动条），返回值不带单位
元素.scrollWidth和元素.scrollHeight

获取位置

获取元素内容往左、网上滚动看不到的距离（被卷去的头部和左侧的距离）
.scrollLeft 和 .scrollTop
元素的这两个属性可以直接修改

样例代码：

let div = document.querySelector('div')
console.log(div.scrollWidth)div.addEventListener('scroll',function(){console.log(this.scrollTop)
})

检测页面滚动事件

window.addEventListener('scroll',function(){let num = document.documentElement.scrollTopconsole.log(num)
})

documentElement 也就是指 html

2.2 offset家族

简单的说就是通过js的方式，得到元素在当前页面中的位置

获取宽高

获取元素的自身宽高、包含元素自身设置的宽高、padding、border等
.offsetWidth 和 .offsetHeight

获取位置

获取元素距离自己定位父级元素（若没有，默认文档的左上角）的左、上距离
offsetLeft 和 offsetTop 是只读属性

获取位置

2.3 client家族

获取宽高

获取元素的可见部分的宽高（不包含边框、滚动条等）
.clientWidth 和 .clientHeight
只读属性

获取位置

样例代码，根据网页大小变化改变背景颜色

window.addEventListener('resize',function(){let w = document.documentElement.clientWidth
if(w >= 1920){document.body.style.backgroundColor = 'pink'
}
else if(w?540){document.body.style.backgroundColor = 'hotpink'
}
else{document.body.style.backgroundColor = 'deeppink'
}
})

JavaScript基础——滚动事件、加载事件、三大家族相关推荐

javascript 窗口加载事件相关问题
window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像.脚本文件.CSS文件等),就调用的处理函数: 有了window.onload就可以把JS代码写到页面元素 ...
页面加载事件html5,JavaScript页面加载事件实例讲解
一.onload 加载事件 onload 是 window 对象的一个事件,也可以省略 window 直接使用. 常用方式: 这个事件是等待页面加载完成之后,再执行注意:该事件相比于在中的
深入理解DOM事件类型系列第六篇——加载事件
前面的话提到加载事件,可能想到了window.onload,但实际上,加载事件是一大类事件,本文将详细介绍加载事件 load load事件是最常用的一个事件,当页面完全加载后(包括所有图像.java ...
Web API-DOM-滚动事件、加载事件和元素大小和位置
滚动事件滚动触发元素:元素.addEventListener("scroll", function () { }); 加载事件加载元素:window.addEventListe ...
[置顶] 加载事件js代码
1 /*加载事件代码*/ 2 function addLoadEvent(func) { 3 var oldonload = window. 4 if (typeof window.onload != ...
Android中加载事件的方式
Android中加载事件的方式通过内部类的方式实现通过外部类的方式实现通过属性的方式实现通过自身实现接口的方式实现通过内部类的方式实现 Demo btn_Login.setOnClickLi ...
CSS、JavaScript和Ajax实现图片预加载的三大方法及优缺点分析
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发 ...
jQuery的页面加载事件
window.οnlοad=function(){...}作用是当页面加载的时候可以调用某些函数,例如: window.onload = function() {alert("加载成功&qu ...
jquery中DOM加载事件，onload事件和ready事件
全栈工程师开发手册 (作者:栾鹏) jquery系列教程4-事件操作全解 jquery中DOM加载事件 jquery中的DOM加载事件分为onload事件和ready事件.,具体功能如代码中注释. 代 ...

JavaScript基础——滚动事件、加载事件、三大家族

文章目录

一、滚动事件和加载事件

1.1 滚动事件

1.2 加载事件

二、三大家族

2.1 scroll家族

2.2 offset家族

2.3 client家族

JavaScript基础——滚动事件、加载事件、三大家族相关推荐

最新文章

热门文章