（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件

一、滚动事件和加载事件

1.1滚动事件

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

• 时间名

• 监听整个页面滚动

  // 页面滚动事件
  window.addEventListener('scroll', function() {
       // 执行的操作
  })

• 给window或document添加scroll事件

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

1.2加载事件

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

• 为什么要学?

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

  老代码喜欢把script写在head中，这时候直接找dom元素找不到

• 事件名: load

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

  给window添加load事件

// 页面滚动事件
window.addEventListener('load', function() {
     // 执行的操作
})

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

二、元素大小和位置

2.1 scroll家族

• 使用场景：

  我们想要页面滚动一段距离，比如100px，就让某些元素显示隐藏，那我们怎么知道，页面滚动了

  100像素呢?

  就可以使用scroll来检测页面滚动的距离~~~

• 获取宽高：

  获取元素的内容（不包含滚动条）返回值不带单位

  scrollWidth scrollHeight

• 获取位置：

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

  scrollLeft和scrollTop

  这两个属性是可以修改的

  div.addEventListener('scroll', function() {
              //    执行的操作
                  console.log(this.scrollTop)
              })

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

  // 先做页面滚动事件
          window.addEventListener('scroll', function() {
              // document.documentElement.scrollTop 获得当前页面被建区的头部；
              let num = document.documentElement.scrollTop;
              console.log(num);
          })

2.2offset家族

• 使用场景：

  前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。 简单说，就是通过js的方式，得到元素在页面中的位置这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示...

• 获取宽高：

  获取元素的自身宽高、包含元素自身设置的宽高、padding.

  borderoffsetWidth和offsetHeight

• 获取位置：

  获取元素距离自己定位父级元素的左、上距离

  offsetLeft和offsetTop注意是只读属性

2.3 client家族

• 获取宽高：

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

  clientWidth和clientHeight

• 获取位置：

  获取左边框和上边框宽度

  clientLeft和clientTop 注意只读属性

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

  resize

  window.addEventListener('resize', function() {
        // 执行的代码
  })

• 检测屏幕宽度：

  window.addEventListener('resize', function() {
          let w = document.documentElement.clientWidth;
          console.log(w);
  })