JS-滚动事件和加载事件

滚动事件 scroll

当页面进行滚动时触发事件

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

事件名scroll

// 监听整个页面的滚动
window.addEventListener('scroll', function () {
    // 执行的操作
})

给windows或document添加scroll事件
监听某个元素的内部滚动直接给某个元素添加即可

加载事件 load

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

有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把Script写在head中，这时候直接找dom元素找不到

事件名load

// 监听页面所有的资源加载完毕
window.addEventListener('load', function () {
    // 执行的操作
})

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

加载事件 DOMContentLoaded

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

事件名DOMContentLoaded

// 监听页面DOM资源加载完毕
// 给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function () {
    // 执行的操作
})

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