DOM- 网页特效篇：

滚动事件和加载事件：

滚动事件：

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

事件名：scroll

    <script>
        // 页面滚动事件
        window.addEventListener("scroll", function () {
            //执行的操作
        })
        // 给 window 或 document 添加 scroll 事件
    </script>
    <script>
        //box内容执行进行滚动的时候
        box.addEventListener("scroll",function(){
            //执行的操作
        })
    </script>

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

加载事件：

为什么要学？
- 有些时候需要等页面资源全部处理完了做一些事情
- 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

监听页面

给 window 添加 load 事件

    <script>
        // 页面加载事件
        window.addEventListener("load", function () {
            //执行的操作
        })
    </script>

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发，而无需等待样式表，图像C等完全加载
事件名：DOMContentLoaded

监听页面DOM加载完毕：

给 document 添加 DOMContentLoaded 事件

    <script>
        document.addEventListener("DOMContentLoaded",function(){
            //执行的操作
        })
    </script>

建议：后期业务处理之前，先添加load事件，保证所有资源全部都加载完毕了

元素大小和位置：

scroll家族：

scrollWidth/scrollHeight
- 获取元素的宽高值 包含内容+padding

scrollTop/scrollLeft

获取元素内容往左、往上滚出去看不到的距离

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

    <script>
        div.addEventListener("scroll",function(){
          console.log(this.scrollTop);
        })
    </script>

开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

    <script>
        //页面滚动事件
        window.addEventListener("scroll", function () {
            //document.documentElement.scrollTop获得当前页面被卷去的头部
            let top = document.documentElement.scrollTop
            console.log(top);
        })
    </script>

注意事项：document.documentElement HTML 文档返回对象为HTML元素

offset家族：

offsetWidth/offsetHeight
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
- 注意：获取的是可视宽高，如果盒子是隐藏的，获取的是0
offsetLeft/offsetTop
- offsetLeft 当前元素相对于定位父容器的左侧距离
- offsetTop 当前元素相对于定位父容器的上侧距离
offsetLeft和offsetTop 注意是只读属性

client家族：

clientWidth和clientHeight
- 获取元素的可见部分宽高（不包含边框，滚动条等）
clientLeft和clientTop
- 获取左边框和上边框宽度 注意是只读属性

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

resize

    <script>
        window.addEventListener("resize", function () {
            //执行的代码
        })
    </script>

检测屏幕宽度：

    <script>
        window.addEventListener("resize", function () {
            let width =document.documentElement.clientWidth
            console.log(width);
        })
    </script>

屏幕大小改变事件：

    <script>
        window.addEventListener("resize", function (event) {
            console.log(`页面发生大小了`);
            // 移动端屏幕适配 rem   淘宝js库，flexible.js  作用  设置html的字体大小 为当前页面的宽度的十分之一
            // 获取当前页面的宽度
            console.log(document.body.offsetWidth);
            // 设置页面html标签的字体大小为屏幕的十分之一
            document.documentElement.style.fontSize = document.body.offsetWidth / 10 + `px`


            // 响应式布局的时候  发一个js文件  方便根据当前页面的宽度 告诉我们屏幕的种类和宽度
            const width = document.body.offsetWidth

            if (width > 1200) {
                document.querySelector('title').innerText = `大屏幕${width}`
            } else if (width > 992) {
                document.querySelector('title').innerText = `中等屏幕${width}`
            } else if (width > 768) {
                document.querySelector('title').innerText = `小屏幕${width}`
            } else {
                document.querySelector('title').innerText = `极小屏幕${width}`
            }
        })
    </script>

学习 Web APIs 懵懂的第五天！！！

DOM- 网页特效篇：

滚动事件和加载事件：

滚动事件：

加载事件：

元素大小和位置：

scroll家族：

offset家族：

client家族：