页面事件和属性-CSDN博客

本文详细介绍了网页加载的各个阶段，包括load事件在所有资源加载完毕时触发，DOMContentLoaded事件在DOM解析完成后触发。还讨论了滚动事件的应用，如固定导航栏，以及resize事件应对窗口尺寸变化。同时，提到了获取元素尺寸和位置的方法，如clientWidth、clientHeight、offsetLeft、offsetTop等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面加载事件

load

（监听整个页面资源）

加载外部资源（图片，外联css和javaScript）加载完毕时触发的事件

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

给window添加load事件

window.addEventListener('load',function(){

        })

DOMContentLoaded

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

监听页面DOM加载完毕

给document添加DOMContentLoaded 事件

 document.addEventListener('DOMContentLoaded',function(){
            console.log("HTML文档加载完毕 dom");
            const box =document.querySelector(".box")
            console.log(box)
        })

页面滚动事件

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

使用：页面需要检测页面滚动到某个区域后做一些处理，固定导航栏，返回顶部--------京东页面

事件名:scroll

监听整个页面滚动

window.addEventListener('scroll',function(){
            //执行操作
})
给window或者document添加scroll事件

页面尺寸事件

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

resize

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

获取宽高

获取元素的可见部分宽高(不包含border，margin,滚动条)
clientWidth clientHeight （width+padding）

元素尺寸和位置

获取元素的尺寸大小和页面中的位置

使用场景:

1.通过js得到元素在页面中的位置

offsetLeft 和offsetTop

获取元素距离自己定位父级元素的左，上距离，跟绝对定位类似

如果父级没有定位以浏览器文档为准

返回的是数字不带单位，是只读

2.通过js，得到元素的实际大小

offsetWidth offsetHeight

获取元素自身宽高，包含元素自身设置的宽高，padding，border （width+padding+border）

返回的是数字不带单位，是只读