滚动事件-加载事件-页面宽度改变事件-元素位置我的学习笔记，涉及内容有：滚动事件的说明-应用-滚动距离获取；加载事件

一、滚动事件

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

2.事件名：scroll

3.监听整个页面滚动：（给window添加滚动事件）

1649948708362

也可以给document添加scroll事件，监听某个元素内部滚动直接给某个元素加即可（谁要滚动绑定谁就可以）

4.设置页面滚动的距离：

语法：document.documentElement.scrollTop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>1</h1>
    <h1>2</h1>
    <h1>3</h1>
    <h1>4</h1>
    <h1>5</h1>
    <h1>6</h1>
    <h1>7</h1>
    <h1>8</h1>
    <h1>9</h1>
    <h1>10</h1>
    <h1>11</h1>
    <h1>12</h1>
    <h1>13</h1>
    <h1>14</h1>
    <h1>15</h1>
    <h1>16</h1>
    <h1>17</h1>
    <h1>18</h1>
    <h1>19</h1>
    <h1>20</h1>
    <h1>21</h1>
    <h1>22</h1>
    <h1>23</h1>
    <h1>24</h1>
    <h1>25</h1>
    <h1>26</h1>
    <h1>27</h1>
    <h1>28</h1>
    <h1>29</h1>
    <h1>30</h1>
    <script>
        window.addEventListener('scroll',function(){
            console.log('滚啦')
            //console.log(document.documentElement.scrollTop)
            //document.documentElement.scrollTop 获取滚动距离
        })
    </script>
</body>
</html>

二、加载事件

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

1.事件名：load

1.给window添加load事件

2.写代码的时候，我们会把所有的代码写在window.load事件中，确保资源全部都可以使用。

3.load事件：事件会等待，先等标签生成了，同时标签内的外部资源都加载完毕后才会触发。（慢）

1649950960404

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

2.事件名：DOMContentLoaded

1.给 document 添加 DOMContentLoaded 事件

2.DOMContentLoaded 事件：页面标签都加载完毕后就触发，无需等待标签内的外部资源都加载完。（快）

1649951203563

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>05-页面加载事件的作用.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
    <!-- 以前写js 习惯写在head标签中 -->
    <!-- <script>
      // 等待标签加载完毕了，才去获取dom元素
      document.addEventListener('DOMContentLoaded', function () {
        const h1 = document.querySelector('h1');
        console.log(h1);
        h1.innerText = '我们自己修改的';
      });
      // js先执行，但是 dom元素还没有开始加载
    </script> -->
  </head>
  <body>
    <h1>大标题</h1>
    <!-- <img
      src="https://dss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/33867296_1452769018_259_194.jpg"
      alt=""
    /> -->
    <!-- 
      load 作用 
      我希望  在h1标签上输出一张图片的高度
     -->
    <script>
      // window.addEventListener('load', function () {
      // 等待图片完全加载了 内容也回来， 才触发
      // const img = document.querySelector('img');
      // 获取图片标签的宽度
      // console.dir(img.height); // 0  因为 代码执行到这里的时候 图片的内容还没有回来

      // document.querySelector("h1").innerHTML=img.height;
      // });

      // 现在建议把代码 写在 </body> 上面 ， 先等待dom标签加载，然后才去获取dom元素
    </script>
  </body>
</html>

3.小结

1.页面滚动事件如何添加？

scroll
监听整个页面滚动给 window 或 document 加

2.加载事件有哪两个？如何添加？

load 事件
- 听整个页面资源，给 window 加
DOMContentLoaded
- 给 document 加,当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

三、元素大小和位置

1.scroll家族

1.可获取元素内容的宽和高，返回值不带单位

2.获取内容的宽、高语法：

scrollWidth(宽) ；scrollHeight(高)

dom对象.scrollWidth(或scrollHeight)

3.scrollWidth

不包含滚动条的大小
等于容器可以滚动的大小
整个可以滚动的区间宽度

4.scrollHeight

等于容器可以滚动的大小
不包含滚动条的大小
整个可以滚动的区域高度

5.页面滚动使用：

window.addEventListener("scroll") 事件

获取滚动距离：document.documentElement.scrollTop

6.元素滚动

dom对象.addEventListener("scroll") 事件

获取元素滚动距离

dom对象.scrollTop 垂直滚动距离（上边距离）

dom对象.scrollLeft 水平滚动距离（左边距离）

7.细节

pc端：滚动条的大小是有的为17px。

移动端：滚动条的大小是没有的，不占大小。你在操作时，滚动条才显示出来，不操作是会隐藏起来。

cc091d16b7fb19337a9f873d9c41477

acebb8f7b2191fe6b75ac9bd45e2b10

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

1650091739243

注意:

document.documentElement HTML 文档返回对象为HTML元素

1650091762617

9.小结

1.scrollWidth和scrollHeight是得到元素什么的宽高？

内容
不包含滚动条

2.被卷去的头部或者左侧用那个属性？是否可以读取和修改？

scrollTop / scrollLeft
可以读取，也可以修改（赋值）

3.检测**页面（window）**滚动的头部距离（被卷去的头部）用那个属性？

document.documentElement.scrollTop

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>06-scroll家族.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .scroll-dom {
        width: 300px;
        height: 300px;
        background-color: aqua;

        /* 滚动条 */
        /* overflow: scroll; */
        overflow-x: scroll;

        /* border: 20px; */

        /* 让文字不要换行 */
        /* white-space: nowrap; */
      }
    </style>
  </head>
  <body>
    <div class="scroll-dom">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis
      similique rerum ea dicta assumenda? Quam error eaque accusamus. Ipsa,
      dicta aspernatur! Consequatur odit eos, dignissimos rem iure excepturi
      commodi dicta. Lorem ipsum dolor sit amet consectetur, adipisicing elit.
      Cum, possimus ab incidunt ipsum animi reprehenderit quia deserunt odit?
      Laborum natus asperiores amet adipisci laudantium tempore nesciunt
      blanditiis quis voluptas excepturi! Lorem ipsum dolor, sit amet
      consectetur adipisicing elit. Eaque error quae, minima facilis recusandae
      cumque qui sed saepe excepturi accusamus neque, illum eius perspiciatis
      aliquid dicta ullam est et maiores!
    </div>
    <script>
      /* 
      scrollWidth  不包含 滚动条 大小 
      scrollWidth  等于容器可以滚动的大小 
       */
      const scrollDom = document.querySelector('.scroll-dom');
      // 输出它宽度高度 //内容的宽高
      // console.log(scrollDom.scrollWidth);
       console.log(scrollDom.scrollHeight);

      // 获取当前容器滚动了的距离
      scrollDom.addEventListener('scroll', function () {
        console.log(this.scrollTop);// 获取当前容器的滚动距离
        // console.log(this.scrollLeft); // 获取当前容器的滚动距离
      });

      /* 
      1 页面滚动 使用  window.addEventListener("scroll") 事件
      2 页面的滚动距离 document.documentElement.scrollTop


      1 元素滚动 dom.addEventListener("scroll")
      2 获取元素滚动的距离
        dom.scrollTop
        dom.scrollLeft

      3 scrollWidth 整个可以滚动的区间的宽度
      4 scrollHeight 整个可以滚动的区域的高度 

      小细节  PC端的滚动条大小 17px
      小细节 移动端的滚动条 不占大小 

      
       */
    </script>
  </body>
</html>

2.offset家族

1.获取宽高

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

2.获取位置

获取元素距离自己定位父级元素的左、上距离
offsetLeft和offsetTop 注意是只读属性

1650093490916

3.注意

dom对象.offsetWidth 、dom对象.offsetHeight 包含滚动条的大小
offsetLeft、offsetTop 获取当前元素距离，定位了的父元素的大小（找不到定位了的父元素，相对于页面（window）来计算）

dom对象.offsetLeft 获取定位了的父元素，水平距离（左边距离）

dom对象.offsetTop 获取定位了的父元素，垂直距离（上边距离）

6d8da8bef78d1bff434e45f9be37e48

4.小结

1.offsetWidth和offsetHeight是得到元素什么的宽高？

内容 + padding + border

2.offsetTop和offsetLeft 得到位置以谁为准？

带有定位的父级（祖父级也是可以的）
如果都没有则以文档（页面）左上角为准

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>07-offset家族.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .offset {
        width: 300px;
        height: 300px;
        background-color: aqua;

        overflow: scroll;
       margin-left: 10px;
      }
      .parent{
        position: fixed;
        left: 400px;
        top: 30px;
        background-color: salmon;
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <h1>标题</h1>
      <div class="offset"></div>
    </div>
    <script>
      const offsetDom = document.querySelector('.offset');

      // 获取宽度和高度 包含这滚动条的大小 
      console.log(offsetDom.offsetWidth);// 300 
      console.log(offsetDom.offsetHeight);// 300

      // console.log(offsetDom.scrollWidth); // 283
      // console.log(offsetDom.scrollHeight);// 283 

      // 获取当前元素距离 定位了的父元素的大小(找不到定位了的父元素，相对于页面来计算)
      console.log(offsetDom.offsetLeft);//10
      console.log(offsetDom.offsetTop);//42


      /* 
      总结 offset家族
      1 offsetWidth  获取元素的宽度 包含这滚动条
      2 offsetHeight 获取元素的高度 包含这滚动条
      3 offsetLeft 获取定位了的父元素的 水平距离 左 
      4 offsetTop 获取定位了的父元素的 垂直距离 上
       */
    </script>
  </body>
</html>

3.client家族

1.获取宽高

获取元素的可见部分宽高（不包含边框，滚动条等）
clientWidth和clientHeight

2.获取位置

获取左边框和上边框宽度
clientLeft和clientTop 注意是只读属性

1650095074071

3.注意：

1.dom对象.clientWidth 、dom对象.clientHeight 不包含滚动条大小

2.dom对象.clientLeft、dom对象 .clientTop 获取的是左边框和上边框的宽度

5930565d72eb437d2f72626ef87aa30

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>08-client家族.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .client {
        width: 300px;
        height: 300px;
        background-color: aqua;
        margin: 100px auto;

        overflow: scroll;

        border-left: 1px solid #000;
        /* border-right: 1px solid red; */
      }
    </style>
  </head>
  <body>
    <div class="client">
      <h1>1</h1>
      <h1>2</h1>
      <h1>3</h1>
      <h1>4</h1>
      <h1>5</h1>
      <h1>6</h1>
      <h1>7</h1>
      <h1>8</h1>
      <h1>9</h1>
      <h1>10</h1>
      <h1>11</h1>
      <h1>12</h1>
      <h1>13</h1>
      <h1>14</h1>
      <h1>15</h1>
      <h1>16</h1>
      <h1>17</h1>
      <h1>18</h1>
      <h1>19</h1>
      <h1>20</h1>
      <h1>21</h1>
      <h1>22</h1>
      <h1>23</h1>
      <h1>24</h1>
      <h1>25</h1>
      <h1>26</h1>
      <h1>27</h1>
      <h1>28</h1>
      <h1>29</h1>
      <h1>30</h1>
    </div>
    <script>
      const clientDom = document.querySelector('.client');
      // 宽度和高度
      console.log(clientDom.clientWidth); // 不包含 滚动条（类似 scrollWidth）
      console.log(clientDom.clientHeight); // 不包含 滚动条（类似 scrollHeight）

      // 获取边框的大小
      console.log(clientDom.clientLeft); // 左边框
      console.log(clientDom.clientRight); // 有没有？  没有的
      console.log(clientDom.clientTop); // 上边框  

      // scollWidth     获取容器的宽度（包含滚动的区域）
      // offsetWidth    获取可视区域的宽度（包含滚动条）
      // clientWidth    获取可视区域的宽度（不包含滚动条）

      // scrollLeft    获取左侧滚动的距离
      // offsetLeft    获取和已经定位了的父级元素的左距离
      // clientLeft    获取左边框的大小 


    </script>
  </body>
</html>

4.总结

1.offset家族

获取元素自身大小：包括自身设置的宽高、padding、border
获取元素距离定位父级的左和上距离只读属性

2.client家族

获取元素可见区域的大小
获取元素左、上边框距离只读属性

3.scroll家族

获取元素内容的总大小
获取元素向左向上滚出去看不见的距离可读写属性

四、页面大小发生变化事件

页面大小发生变化就会触发的事件

语法： resize

用window来绑定

1650098781425

检测屏幕宽度

1650098800188

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>09-屏幕大小改变事件.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 1rem;
        height: 1rem;
        background-color: aqua;
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div>div</div>
    <script>
        // 页面大小发生变化了就会触发的事件 resize window来绑定
        let div=document.querySelector('div')
        window.addEventListener('resize',function(){
            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>
  </body>
</html>

总结

我的思维导图-jsAPI-day5