滚动事件和加载事件

最新推荐文章于 2024-06-23 14:24:21 发布

小番水源

最新推荐文章于 2024-06-23 14:24:21 发布

阅读量279

点赞数

分类专栏： js 文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_43368552/article/details/126894403

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

滚动事件：

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

很多网页需要检测用户把页面滚动到某个区域后做出一些处理，比如固定导航栏、返回顶部等

事件名：scroll

window.addEventLister('scroll',function(){ })

<!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>
    <style>
        body {
            height: 3000px;
        }
        div{
    overflow: scroll ;
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
    </style>
</head>

<body>
    <div>
        我里面有很多文字
        我里面有很多文字 
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字   
        我里面有很多文字
        我里面有很多文字
        我里面有很多文字
    </div>
    <script>
        let div=document.querySelector('div')
        div.addEventListener('scroll', function () {
            console.log(111);
        })
    </script>
</body>

</html>

加载事件：

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

事件名： load

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

给window添加load事件

页面加载事件

window.addEventListener('load',function(){

执行操作})

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件（就是某个dom加载完毕，执行某个操作）