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

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

下面是对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(){ });