javascript学习（8）：onload事件,一次性加载多个函数（多重加载有关问题）

javascript学习（8）：onload事件,一次性加载多个函数（多重加载问题）
onload事件,一次性加载多个函数（多重加载问题）

使用新的addOnload()函数设置多重onload 属性
一次性加载3个函数。
这个脚本设置在加载页面时运行的多个onload 处理程序

<!DOCTYPE html>
<html>
<head>
<title>Welcome!</title>
</head>
<body id="pageBody">
	<h1>Welcome to our Web site!</h1>
	<script>
		addOnload(initOne);
		addOnload(initTwo);
		addOnload(initThree);
		
		function addOnload(newFunction) {
			var oldOnload = window.onload;
			if (typeof oldOnload == "function") {
				window.onload = function() {
					if (oldOnload) {
						oldOnload();
					}
					newFunction();
				}
			} else {
				window.onload = newFunction;
			}
		}
		
		function initOne() {
			alert("1");
			document.getElementById("pageBody").style.backgroundColor = "#00F";
		}
		function initTwo() {
			alert("2");
			document.getElementById("pageBody").style.color = "#F00";
		}
		function initThree() {
			alert("3");
			var allTags = document.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";
				}
			}
		}
	</script>
</body>
</html>

在这个脚本中，在首次加载页面时，我们希望发生完全不同的三种情况。设置window.onload 三次是不行的，因为第二次设置会覆盖第一次的，第三次设置会覆盖第二次的。相反，我们要调用一个新函数addOnload()，由它替我们处理onload 处理程序。对于每个调用，传递一个参数：在触发onload事件时希望运行的函数的名称。
第一次它将自己的函数赋值给window.onload；第二次和第三次会创建匿名函数，让JavaScript 执行以前设置的操作和新添加的函数。

javascript学习（8）：onload事件,一次性加载多个函数（多重加载有关问题）

相关推荐