javascript中 addloadevent和insertAfter函数的使用说明

在HTML文档完成加载之前，DOM是不完整的。此时如果执行js代码，测试的准确性就无从谈起，所以我们必须让这个函数在网页加载完毕之后才得到执行。我们常用的方法就是：

window.onload = 某个函数；

注：这条浅显易懂语句可以使用，但有时不太适用（当页面加载完成需要执行多个函数时）

假设我们有两个函数，firstFunction()和secondFunction()，如果我想让他们俩都在页面加载时执行，那么我们可能会这样做：

window.onload = firstFunction; 
window.onload = secondFunction;

注:这个技巧简单实用，但是不适合函数很多的场合，所以下面介绍一个好的方法addLoadEvent()函数

下面看一个简单的例子吧！

function addLoadEvent(func){
    //把widow.onload存储在一个变量中
    var oldonload = window.onload;
    //如果当前不存在要加载的函数,加载最新传入的函数
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        //如果已经存在要加载的函数,执行原来的函数,
        //并把新引入的函数放在该函数后面执行,自我感觉有点像递归函数一样
        window.onload = function(){
            oldonload();
            func();
        };
    }
}

/*
 把页面加载完成要执行的函数添加到队列中,依次执行
 * */
addLoadEvent(showOne);
addLoadEvent(showTwo);
addLoadEvent(showThree);

/*
 以下是几个测试函数
 */

function showOne(){
    alert("我是showOne()函数,one,one,one!");
}

function showTwo(){
    alert("我是showTwo()函数,two,two,two!");
}

function showThree(){
    alert("我是showThree()函数,three,three,three!");
}

代码的功能在页面加载完成时，依次执行showone(),showtwo(),showthree()方法。

 
 

  
  调用方法addLoadEvent(func);这里的func 就是需要调用的函数，
 
 
 
 

  
  function addLoadEvent(func){创建了一个函数名为addLoadEvent,参数为func的函数，这里把我们需要加载的函数作为参数在这个addLoadEvent函数中进行调用。}
 
 
 
 

  
  var oldοnlοad=window.onload 定义一个变量,把window.onload赋给oldonload，如果开始的时候window.onload调用了一个函数A()，那么在这里oldonload就等于A();
 
 
 
 

  
  //typeof 判断一个变量的类型，如果window.onload调用的是一个函数，那么这个if条件语句的值就是true那么就执行window.οnlοad=func;(此时的参数func就是我们需要调用的函数)
 
 
 
 

  
  如果条件语句的结果是false，那么就调用一个匿名的函数window.οnlοad=function(){oldonload();func();}
 
 
 
 

  
  这个匿名的函数 会先执行oldonload()函数,然后执行func（）这个函数。
 
 
 
 

  
  也就是说，会先调用 正在执行的那个函数，然后在调用我们需要调用的函数A().
 
 
 
 


 
 

//DOM没有提供insertAfter()方法
function insertAfter(newElement, targetElement){
    var parent = targetElement.parentNode;
    if (parent.lastChild == targetElement) {
        // 如果最后的节点是目标元素，则直接添加。因为默认是最后
        parent.appendChild(newElement);
    }
    else {
        parent.insertBefore(newElement, targetElement.nextSibling);
        //如果不是，则插入在目标元素的下一个兄弟节点 的前面。也就是目标元素的后面
    }
}