对于addLoadEvent()的简单解析

function addLoadEvent(func){
	var oldonload=window.onload;
	if(typeof window.onload!='function'){
		window.onload=func;
	}
	else{
		window.onload=function(){
			oldonload();
			func();
		}
	}
}


1.先将原来window.onload上的函数赋值到oldload上
2.判断window.onload的类型是否是函数
3.如果不是函数就将func绑定到window.onload上
4.如果是就先执行原来有的函数再执行新的函数。
### 含义 `addLoadEvent(init);` 是一种自定义的函数调用方式。其中 `addLoadEvent` 是一个自定义的函数,`init` 是作为参数传递给该函数的另一个函数。其本质是将 `init` 函数添加到页面加载完成后要执行的函数列表中。 ### 作用 在传统的 JavaScript 中,页面元素的操作通常需要在页面完全加载完成后进行,因为在页面未加载完成时,尝试访问某些元素可能会因为元素还未被创建而导致错误。`addLoadEvent` 函数的作用就是确保 `init` 函数在页面加载完成后执行,避免了在页面元素还未准备好时就执行操作的问题。 ### 使用方法 以下是一个典型的 `addLoadEvent` 函数的实现示例: ```javascript function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } function init() { // 这里可以放置在页面加载完成后要执行的代码 console.log('页面加载完成,init 函数执行'); } addLoadEvent(init); ``` 在上述代码中,首先定义了 `addLoadEvent` 函数,它接受一个函数作为参数。在函数内部,它检查 `window.onload` 是否已经被赋值,如果没有,则直接将传入的函数赋值给 `window.onload`;如果已经被赋值,则创建一个新的函数,在这个新函数中先执行原来的 `window.onload` 函数,再执行传入的函数。 然后定义了 `init` 函数,该函数包含了在页面加载完成后要执行的代码。最后调用 `addLoadEvent(init)` 将 `init` 函数添加到页面加载完成后的执行列表中。 ### 技术背景 在早期的 JavaScript 中,`window.onload` 是用于指定页面加载完成后要执行的函数的常用方法。然而,`window.onload` 只能绑定一个函数,如果多次为 `window.onload` 赋值,后面的赋值会覆盖前面的赋值。为了解决这个问题,开发者们创建了类似 `addLoadEvent` 这样的函数,通过这种方式可以将多个函数添加到页面加载完成后的执行列表中,确保多个函数都能在页面加载完成后依次执行。 随着技术的发展,现代浏览器支持 `DOMContentLoaded` 事件,该事件在页面的 DOM 树构建完成后就会触发,而不需要等待所有资源(如图片)加载完成,相比 `window.onload` 更加高效。同时,还可以使用 `addEventListener` 方法来绑定事件,它可以为同一个事件绑定多个处理函数,避免了 `window.onload` 只能绑定一个函数的问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值