onload事件——使用自定义addOnload(函数)设置多重onload属性

最新推荐文章于 2024-02-08 14:08:30 发布

寻找小海螺

最新推荐文章于 2024-02-08 14:08:30 发布

阅读量1.3k

点赞数

文章标签： onload

本文链接：https://blog.csdn.net/czkct/article/details/52092002

版权

Html.Css.JavaScript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

test.html

<!DOCTYPE html>
<html>
<head>
	<title>Welcome</title>
	<script src="test.js"></script>
</head>
<body id="pageBody">
<h1>Welcome to our web site!</h1>
</body>
</html>

test.js

addOnload(initOne);
addOnload(initTwo);
addOnload(initThree);

/*
过程分析：
addOnload(initOne) -> 执行else部分 -> window.onload = initOne;
addOnload(initTwo) -> oldOnload = initOne; -> 执行if部分 -> window.onload = {initOne(); initTwo();} 
addOnload(initThree) -> oldOnload() = {initOne(); initTwo();} -> 执行if部分 -> window.onload = {initOne(); initTwo(); initThree();} 

*/


function addOnload(newFunction) {
	var oldOnload = window.onload;

	if(typeof oldOnload == "function") {
		window.onload = function() {
			oldOnload();
			newFunction();
		}
	}
	else {
		window.onload = newFunction;
	}
}

/*
window.onload = function() {
	initOne();
	initTwo();
	initThree();
}/*
这一段注释了的代码可以将上面全部的代码替换掉，效果一样，
但是  要确保每一个函数都返回。
例如，如果函数包含对本身的setTimeout()调用， 它将不会返回， 因此不会到达被调用的其余部分。
即假设initTwo()包含对本身的调用setTimeout()时， 那么这部分注释的代码中的initThree()则无法被调用！！
上面没有注释掉的那种写法一样要保证调用的每个函数都返回！！
*/

function initOne() {
	document.getElementById("pageBody").style.backgroundColor = "#00F";
}

function initTwo() {
	document.getElementById("pageBody").style.color = "#F00";
}

function initThree() {
	var allTags = document.getElementById("pageBody").getElementsByTagName("*");

	for(var i = 0; i < allTags.length; i++) {
		if(allTags[i].nodeName == "H1") {
			allTags[i].style.border = "5px green solid";
			allTags[i].style.padding = "25px";
			allTags[i].style.backgroundColor = "#FFF";
		}
	}
}


/*
这里我发现一个问题：
window.onload = function() {
	fun1();
	fun2();
	...
	funN();
}
onload事件中要调用多个函数时， 其中如果有一个函数语句书写错误， 整个onload事件都不会执行
而如果其中某个函数调用了(但是并不存在这个函数)或者压根就没有调用这个函数， 这个onload的事件还是会执行的！！
*/