JavaScript事件处理（一）

JavaScript事件处理（一）

处理窗口事件

onload事件

当用户进入页面而且所有页面元素都完成加载时，就会触发这个事件。

尽管我们已经多次在脚本中见过使用onload的情况，但是到目前为止，我们一直回避了一个重要问题:  如果在加载页面时需要进行多个操作，那么应该怎么做呢？

下面我们来看一段代码：
                             多重onload示例的HTML
<!DOCTYPE>
<html>
<head>
   <title>Welcome!</title>
   <script src="script01.js"></script>
</head>
<body id="pageBody">
   <h1>Welcome to our Web sitel</h1>
</body>
</html>
使用新的addOnload（）函数设置多重onload属性 
// JavaScript Document
addOnload(initOne);
addOnload(initTwo);
addOnload(initThree);
function addOnload(newFunction){
    var oldOnload=window.onload;
    if(typeof oldOnload=="function"){
        window.onload=function(){
            oldOnload;
            newFunction();
        }
    }
    else{
        window.onload=newFunction;
    }
}    
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";    
        }
    }
}
  • 重点1

    • addOnload(initOne);
    addOnload(initTwo);
    addOnload(initThree);
    在这个脚本中，在首次加载页面时，我们希望发生完全不同的三种情况，设置window.onload三次是不行的，因为第2次设置会覆盖第1次的，第3次设置会覆盖第2次的，相反我们要调用一个新函数，addOnload(),由他替我们处理onload处理程序，对于每个调用传递一个参数，在触发onload事件时，希望运行的函数的名称.

  • 重点2

    • 如果在设置window.onload之后（无论是直接设置，还是通过addOnload()）,再设置嗯，window.onload，原来设置的函数就会丢失。

posted @ 2020-11-16 17:08  班戈—游弋鱼  阅读(95)  评论(0)  编辑  收藏  举报