JavaScript(21)——页面加载和页面滚动事件

A阳俊yi

于 2024-08-20 16:50:10 发布

阅读量179

点赞数 8

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_74386799/article/details/141361528

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

页面加载事件

有时候需要等页面资源全部处理完之后做一些事情。页面加载事件就是加载外部资源（如图片，外联CSS和JavaScript）加载完毕时触发的事件

  <script>
    const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert(11)
    })
  </script>
</head>

<body>
  <button>点击</button>
</body>

由于代码是从上往下执行，所以点击按钮并不会触发弹窗。

事件名:load

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

给window添加load事件

  <script>
    //等待页面所有资源加载完毕，就回去执行回调函数
    window.addEventListener('load', function () {
      const btn = document.querySelector('button')
      btn.addEventListener('click', function () {
        alert(11)
      })
    })
  </script>

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

事件名：DOMContentLoaded

document. addEventListener('DOMContentLoaded',function(){

//执行的操作

})

元素滚动事件

滚动条在滚动到时候持续触发的事件

监听整个页面的滚动

  <script>
    window.addEventListener('scroll', function () {
      //执行的操作
    })
  </script>

scrollLeft和scrollTop:

获取被卷去的大小
获取元素内容往左，往上滚出去看不到的距离
这两个值是可写的

注意：获取HTML元素document.documentElement

  <script>
    //数字型，不带定单位，可赋值，一打开页面就已经往上滑800像素，
    window.addEventListener('scroll', function () {
      console.log(document.documentElement.scrollTop);
    })
  </script>

A阳俊yi

关注

8
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript(21)——页面加载和页面滚动事件

有时候需要等页面资源全部处理完之后做一些事情。页面加载事件就是加载外部资源（如图片，外联CSS和JavaScript）加载完毕时触发的事件由于代码是从上往下执行，所以点击按钮并不会触发弹窗。事件名:load注：不光可以监听整个页面加载完毕，也可以针对某个资源绑定load事件。事件名：DOMContentLoaded//执行的操作})
复制链接

扫一扫

专栏目录