onload自定义函数的六种写法

最新推荐文章于 2025-06-09 22:15:00 发布

最新推荐文章于 2025-06-09 22:15:00 发布 · 1.6k 阅读

文章标签：

本文介绍了六种不同的网页加载事件处理方法，包括直接在body标签中使用onload属性、通过window.onload注册事件、利用函数包裹多个加载事件、使用自定义函数addLoadEvent来添加加载事件监听器、采用通用的addEvent函数为window添加多个加载事件以及兼容多种浏览器的加载事件监听实现。

第一种方法：

function addfunction(){
 ...
}
<body onload="addfunction()">

第二种方法：

window.onload = addfunction;
function addfunction(){
 ...
}

第三种方法：

window.onload = function(){
 firstFunction();
 secondFunction();
}

第四种方法：

function addLoadEvent(func) {   
  var oldonload = window.onload;   
  if (typeof window.onload != 'function') {   
    window.onload = func;   
  } else {   
    window.onload = function() {   
      oldonload();   
      func();   
    }   
  }   
}
addLoadEvent(addfunction);

第五种方法：

function addEvent(obj,EventName,callBack){//给对象添加事件
  if(obj.addEventListener){
   obj.addEventListener(EventName,callBack,false);
  }else if(obj.attachEvent){//IE
   obj.attachEvent('on'+EventName,callBack);
  }else{
   obj["on"+EventName]=callBack; 
  }
} 
function a(){
 alert("a");
}
 
function b(){
 alert("b");
}
addEvent(window,"load",a);
addEvent(window,"load",b);

第六种方法：

// Please note: this file contains snippets for comparison
// it is not self-contained or ready-to-use code as such

function addLoadListener(fn)
{
  if (typeof window.addEventListener != 'undefined')
  {
    window.addEventListener('load', fn, false);
  }
  else if (typeof document.addEventListener != 'undefined')
  {
    document.addEventListener('load', fn, false);
  }
  else if (typeof window.attachEvent != 'undefined')
  {
    window.attachEvent('onload', fn);
  }
  else
  {
    var oldfn = window.onload;
    if (typeof window.onload != 'function')
    {
      window.onload = fn;
    }
    else
    {
      window.onload = function()
      {
        oldfn();
        fn();
      };
    }
  }
}