JS-滚动事件和加载事件

滚动事件 scroll

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

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

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

给 windows 或 document 添加 scroll 事件

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

加载事件 load

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

有些时候需要等页面资源全部处理完了做一些事情

script 写在 head 中，这时候直接找dom元素找不到

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

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

加载事件 DOMContentLoaded

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

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