JavaScript 页面加载时调用函数addLoadEvent实现

最新推荐文章于 2020-04-08 13:13:00 发布

原创最新推荐文章于 2020-04-08 13:13:00 发布 · 529 阅读

0 ·

CC 4.0 BY-SA版权

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了JavaScript中addLoadEvent函数的应用，通过实例演示了如何使用该函数来控制页面加载时元素的位置和移动，展示了函数的递归调用特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

寒假的时候花了一些时间看了看JavaScript编程艺术，发现里面大量用了addLoadEvent函数，索性就直接把它单独写在了一个js文件里，当用的时候直接调用就行了。这个函数用处广泛，下面给出它的代码：

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

类似于c语言，java中的递归调用的意思。

下面给出实例演示一下这个函数：

html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="message">Whee!</p>
	</body>
        //调用addLoadEvent.js文件
	<script src="../js/addLoadEvent.js"></script>
	<script src="../js/Message.js"></script>
</html>

一定要注意不能将两个js的读取顺序弄反。

Message.js文件：

function positionMessage ()
{
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var ele=document.getElementById("message");
	ele.style.position="absolute";
	ele.style.left="50px";
	ele.style.top="100px";
}
function moveMessage ()
{
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var ele=document.getElementById("message");
	ele.style.left="200px";
}
addLoadEvent(positionMessage);

这里先调用positionMessage函数。

效果如下：

再加上moveMessage函数。

代码如下：

function positionMessage ()
{
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var ele=document.getElementById("message");
	ele.style.position="absolute";
	ele.style.left="50px";
	ele.style.top="100px";
}
function moveMessage ()
{
	if(!document.getElementById) return false;
	if(!document.getElementById("message")) return false;
	var ele=document.getElementById("message");
	ele.style.left="200px";
}
addLoadEvent(positionMessage);
addLoadEvent(moveMessage);

效果如下：