window.onload()方法和window.onscroll()方法

最新推荐文章于 2023-04-03 09:23:19 发布

weixin_46370867

最新推荐文章于 2023-04-03 09:23:19 发布

阅读量6.8k

点赞数 3

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109757295

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

也许你想成为太阳，可你却只是一颗星辰；也许你想成为大树，可你却是一棵小草。于是，你有些自卑。其实，你和别人一样，也是一片风景：做不了太阳，就做星辰，在自己的星座发光发热；做不了大树，就做小草，以自己的绿色装点希望……

下面是对window对象中 window.onload()方法和window.onscroll()方法的整理，希望可以帮助到有需要的小伙伴

JavaScript window对象

BOM中最核心的对象就是Window对象

window对象是浏览器窗口中的顶级(全局)对象

window对象的属性和方法在调用时–允许省略’ window . ’

其他5个BOM对象都是作为window对象的属性出现

JavaScript window.onload

什么是 window.onload

window.onload()方法用于在页面加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行的某个方法。

window.onload() 通常用于元素，在页面完全载入后(包括图片、css文件等等)执行window.onload()里面的函数。

只有一个要执行的函数：
```
window.onload = funcRef;
```
- funcRef：函数类型的对象引用或者匿名函数
在页面加载完成后，调用funcRef方法

有多个要执行的函数：

window.onload = function(){
    Func1();
    Func2();
    Func3();
    ......
}

在页面加载完成后依次执行 Func1、Func2、Func3

使用window.onload()的好处

JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，

如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window.onload()方法</title>
    <style>
        #bg {
            width: 100px;
            height: 100px;
            border: 5px solid red;
        }
    </style>

    <script>
        window.onload = function () {
            document.getElementById("bg").style.backgroundColor = "#000";
            console.log("这是window.onload()方法")
        }
    </script>
    <!-- 
        如果不加window.onload()方法，
        当执行到document.getElementById("bg").style.backgroundColor = "#000";的时候，
        还没有加载到div对象，所以背景颜色没有设置成功
     -->
</head>

<body>
    <div id="bg"></div>
</body>

</html>

在这里插入图片描述

JavaScript window.onscroll

滚动当前页面的时候，添加事件处理函数。

语法：

window.onscroll = funcRef;

funcRef是个函数类型的对象引用或者匿名函数.

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>window.onscrolll事件</title>
    <script>
        // 滚动页面的滚动条，会触发scroll事件 
        window.onscroll = scroll;
        function scroll() {
            console.log("检测到页面滚动事件:" + window.pageXOffset + " " + window.pageYOffset);
            // 注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高.
        }

    </script>
</head>

<body>
    <p>改变窗口的大小</p>
    <p>变成很小的尺寸</p>
    <p>使用滚动条</p>
    <p>移动页面内容</p>
    <p>在窗口</p>
</body>

</html>

注意: window.innerWidth 和 window.innerHeight 可以获得页面可见区域的宽和高.

在这里插入图片描述

window.onload 与 jQuery ready()

相同点：
- window.onload和jQuery ready()都是在HTML文档执行完毕后，再执行DOM操作。

不同点：

语法：

window.onload = function () {};    // JavaScript 
$(document).ready(function () {}); // jQuery

	window.onload	$(document).ready()
执行时机	必须等待网页全部加载完毕（包括图片等)，然后再执行包裹代码	只需要等待网页中的DOM结构加载完毕，就能执行包裹的代码
执行次数	只能执行一次，如果执行第二次，那么第一次的执行会被覆盖	可以执行多次,第N次都不会被上一次覆盖
简写	无	$(dunction(){ });