js的 window.load 和window.onload 有啥区别

Posted 2023-04-16

javascript 中的以下代码 :
Window.onload = function ()// 代码
等价于

Jquery 代码如下：
$(window).load(function ()// 代码 );

执行时机
window.load——必须等待网页中所有的内容加载完毕后 ( 包括图片 ) 才能执行

$(document).ready()——网页中所有 DOM 结构绘制完毕后就执行，可以能 DOM 元素关联的内容并没有加载完

编写个数
window.load——不能同时编写多个以下代码无法正确执行：
window.onload = function() alert(“text1”);;window.onload = function() alert(“text2”);;结果只输出第二个

$(document).ready()——能同时编写多个以下代码正确执行：
$(document).ready(function() alert(“Hello World”););$(document).ready(function() alert(“Hello again”););
结果两次都输出

以 浏览器装载文档为例，在页面加载完毕后，浏览器会通过 Javascript 为 DOM 元素添加事件。在常规的 Javascript 代码中，通常使用 window.onload 方法，而在 Jquery 中，使用的是$(document).ready() 方法。 $(document).ready() 方法是事件模块中最重要一个函数，可以极大的提高Web 应用程序的速度。
另外，需要注意一点，由于在 $(document).ready() 方法内注册的事件，只要 DOM 就绪就会被执行，因此可能此时元素的关联文件未下载完。
例如与图片有关的 html 下载完毕，并且已经解析为 DOM 树了，但很有可能图片还没有加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load() 方法。
Load() 方法会在元素的onload 事件中绑定一个处理函数。
如果处理函数绑定给 window 对象，则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发，如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。

总结：
js:window.onload页面一运行就执行该函数，执行该函数时，可能页面中的图片还没有加载完成！
jquery： $(window).load()页面中的图片或其它东西加载完成之后，执行该函数。 参考技术A 总结写错了吧

面试题

1. js的window.onload事件和$(document).ready函数有什么区别？

在js中：
window.onload=function()
alert("000")

等同于在jQuery中：
$(window).load(function()
alert("000");
)

相同点：
（1）它们都是用于当前页面的所有元素，包括外部引用文件，图片都加载完毕时运行函数的alert函数。
（2）它们都是用于当前页面的标准DOM元素被解析成DOM树后就执行内部alert函数。

不同点：
（1）load方法只能执行一次，如果js文件里写了多个，只能执行最后一个。
（2）$(document).ready()函数在HTML结构加载完后就可以执行，不需要等大型文件加载或者不存在的连接等耗时工作完成才执行。

2. Promise的基本使用和原理

作用：
（1）解决回调地狱问题
（2）可以实现在多个请求发送完成后，再得到或者处理某个结果

原理：
promise有三种状态：
Pending Promise 对象实例创建时候的初始状态；
Fulfilled 可以理解为成功的状态；
Rejected可以理解为失败的状态；
（1）构造一个Promise实例需要给Promise构造函数传入一个函数。传入的函数需要有两个形参，两个形参都是function类型的参数。分别是resolve和reject。
（2）Promise上还有then方法，then 方法就是用来指定Promise 对象的状态改变时确定执行的操作，resolve 时执行第一个函数（onFulfilled），reject时执行第二个函数（onRejected）
（3）当状态变为resolve时便不能再变为reject，反之同理

3.下列html结构中，如何让子元素在父元素中垂直、水平居中。
<div class="parent">
<div class="child"></div>
</div>
一共有七种方法：
（1）定位+margin:auto
注意：兼容性较好，缺点:不支持IE7以下的浏览器
.parentr
position: relative;
width: 300px;
height: 300px;
background: yellow;

.child
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
width: 100px;
height: 100px;
background: red;


（2）定位+margin-left+margin-top
注意：兼容性好;缺点:必须知道元素的宽高
.parent
position: relative;
width: 300px;
height: 300px;
background: yellow;

.child
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
width: 100px;
height: 100px;
background: red;

（3）定位+transfrom
这是css3里的样式;缺点:兼容性不好，只支持IE9+的浏览器
.parent
position: relative;
width: 300px;
height: 300px;
background: yellow;

.child
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 100px;
height: 100px;
background: red;

（4）弹性盒子
移动端首选
.parent
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
background: yellow;

.child
width: 100px;
height: 100px;
background: red;

（5）flex+margin: auto
.parent
display: flex;
width: 300px;
height: 300px;
background: yellow;

.child
margin: auto;
width: 100px;
height: 100px;
background: red;

4.列举2个IE与标准浏览器对事件处理的区别？（监听、阻止冒泡、阻止默认等）
（1）阻止（取消）默认事件
DOM中：event.preventDefault() 阻止默认行为；
IE中: event.returnValue=false 返回值=false
（2）取消冒泡事件
标准浏览器下 DOM中 : event.stopPropagation() 停止传播；
IE8及以下：event.cancelBubble=true 取消冒泡
（3）事件侦听和删除侦听（又叫绑定事件）
ie9以上：添加事件：element.addEventListener(‘事件名’,事件函数名,事件冒泡/捕 获)；
ie8及以下：添加事件：element.attachEvent(‘on开头的事件名’,事件函数名)；

5.指出for、for...in、for...of的区别
（1）for循环：
for循环可以有多层嵌套；
for循环中的变量生存周期为一次循环迭代；
循环条件时每次循环执行一次，而且是在循环最开始时判断条件；
（2）for...in循环：
for..in是 ES5出现的， 循环遍历的是属性，并且自定义属性(attribute)也会被遍历，而且遍历还不一定按照顺序
作用于数组的for-in会循环遍历数组元素
（3）for...of循环：
for...of 是ES6出现的 循环遍历的是值
for...of不能循环普通的对象，需要通过和Object.keys()搭配使用