JS：页面事件

文章目录

• 一、页面加载事件
• 二、页面滚动事件
• 三、页面尺寸事件
• 总结

---

一、页面加载事件

有时候我们会把script的内容放在body前，这时候代码的执行在元素的加载之前，会导致页面元素未加载而报错

解决办法是调用Window的load加载事件，将所有操作放在load函数中，这样程序会先加载页面元素，再执行操作内容

    window.addEventListener('load', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        console.log(111)

      })
    })

 类似的还有document的DOMContentLoaded事件，先加载页面的DOM元素，再执行操作

    document.addEventListener('DOMContentLoaded', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        console.log(111)

      })
    })

二、页面滚动事件

页面滚动事件scroll可以得到当前页面距离顶部的距离，对应的属性scrollTop这个值可读可写，因此可以修改页面滚动距离为0直接回到页面顶部

元素.addEventListener('scroll', function () {
  console.log(元素.scrollTop)
  // 获取滚动距离
})

添加scroll事件，通过scrollTop获取滚动距离。这个元素不仅可以是浏览器页面，也可以是一个盒子，文本框等其他元素

获取页面的滚动距离：

document.documentElement.scrollTop

下面这个例子是页面滚动到一定距离显示顶部栏

    // 获取页面滚动事件
    window.addEventListener('scroll', function () {
      let n = document.documentElement.scrollTop
      if (n >= 500) {
        //当滚动到500是显示
        div.style.display = 'block'
      }
      else {
        div.style.display = 'none'
      }
      if (n >= 1500) {
        document.documentElement.scrollTop = 0
        // 离顶部距离这个属性是可修改的
      }
    })

三、页面尺寸事件

元素的offsetWidth和offsetHeight属性得到元素宽高：元素内容+padding+border

元素.offsetWidth
元素.offsetHeight

这里盒子本身的尺寸是300px左右和上下都加上两border

配套的属性还有offsetLeft、offsetTop、offsetParent，分别是获取到页面左边的距离，到页面顶部的距离，获取父亲元素

元素的clientwidth和clientheight属性获取元素宽高：不含padding和border 

元素.clientWidth
元素.clientHeight

盒子的宽和高被滚动条(设置了scroll属性)占据了15padding，left为向左边第一次“碰壁”，因此为1即border，top同理 

---

总结