当前位置：首页 > news >正文

JS：页面事件

news 来源：原创 2025/5/13 6:07:25

文章目录

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

一、页面加载事件

有时候我们会把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
        // 离顶部距离这个属性是可修改的
      }
    })