处理事件
2016-11-15 本文已影响19人
味蕾里的青春
一、窗口事件处理
1. onload事件：当用户进入页面且所有页面元素都完成加载时，就会触发onload事件。
1.1 html代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-scale,initial-scale=1">
<link type="text/css" rel="stylesheet" href="../css/window.css">
<title>welcome</title>
</head>
<body id=pageBody>
<h1>Welcome to our Web site!</h1>
<script type="text/javascript" src="../js/window.js"></script>
</body>
</html>
1.2 js代码：
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(){
document.getElementById("pageBody").style.backgeoundColor="#0000ff";
}
function initTwo(){
document.getElementById("pageBody").style.color="#ff0000";
}
function initThree(){
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="#ffffff";
}
}
}
1.3 output:
onload
