Javascript 添加多个onload处理程序_Javascript_Event Handling_Onload

Javascript 添加多个onload处理程序

javascript

Javascript 添加多个onload处理程序,javascript,event-handling,onload,Javascript,Event Handling,Onload,我有两个js文件，每个文件都有自己的window.onload处理程序。根据我如何将两个onload处理程序附加到窗口对象，我在第二个处理程序上获得不同的行为更具体地说，这是我的html文件： <html> <head> <title>Welcome to our site</title> <script type="text/javascript" src="script1.js"> </script> <s

我有两个js文件，每个文件都有自己的window.onload处理程序。根据我如何将两个onload处理程序附加到窗口对象，我在第二个处理程序上获得不同的行为

更具体地说，这是我的html文件：

<html>
<head>
 <title>Welcome to our site</title>
 <script type="text/javascript" src="script1.js"> </script>
 <script type="text/javascript" src="script2.js"> </script>
</head>
<body id="pageBody">
 <h2 align="center"> 
  <a href="http://www.whatever.com" id="redirect"> Wellcome to our site... c'mon in! </a> 
 </h2>
</body>
</html>

Script2.js：

addOnloadHandler(initAll2); // with this we should attach a second onload handler

function initAll2() {
 alert("initAll2");
 if (linkHasOnclickHandler(document.getElementById("redirect"))) {
  alert("correct!"); 
 }
 else {
  alert("wrong!");
 }
}

function addOnloadHandler (newFunction) {
 var oldevent = window.onload;
 if (typeof oldevent == "function") {
  window.onload = function() {
      if (oldevent) {
          oldevent();
      }
   newFunction();
  };
 }
 else {
      window.onload = newFunction;
 }
}

function linkHasOnclickHandler() {
 var oldevent = document.getElementById("redirect").onclick;
 if (typeof oldevent == "function") {
  return true;
 }
 else {
  return false;
 }
}

在Script2.js中，我尝试使用函数addOnloadHandler（）以一种很好的非侵入性方式添加第二个onload处理程序。此函数不假设是否已经有任何onload处理程序附加到窗口对象。它是非侵入性的，因为它应该添加新的处理程序，而不删除以前的处理程序

问题是，当使用addOnloadHandler（）加载时，initAll2（）无法检测document.getElementById（“重定向”）已将foo（）作为onclick事件处理程序附加的事实（请参见initAll1（）。触发警报消息“错误！”，在我看来，这似乎是错误的行为

当我忘记addOnloadHandler（）并在Script1.js中附加这两个onload处理程序时，请使用：

window.onload = function () {initAll1(); initAll2();};

然后一切都按预期进行，initAll2（）将启动“正确！”警报消息

addOnloadHandler（）是否有问题？有人能让它工作吗？我真的想用它来代替第二种方法

谢谢

您需要查看和，哪些是您的

addOnloadHandler的本机实现

PPK在addEventListener上的参考说明了如何很好地做到这一点：

谢谢你的回答

我使用addEventListener和attachEvent重写了script2.js，如下所示：

//addOnloadHandler(initAll1); // it works only when uncommenting this
addOnloadHandler(initAll2);

function initAll2() {
    alert("initAll2");
    if (linkHasOnclickHandler(document.getElementById("redirect"))) {
        alert("correct!"); 
    }
    else {
        alert("wrong!");
    }
}

function addOnloadHandler(newFunction) {    
    if (window.addEventListener) { // W3C standard
        window.addEventListener('load', newFunction, false); // NB **not** 'onload'
    }    
    else if (window.attachEvent) { // Microsoft
        window.attachEvent('onload', newFunction);
    }
}

function linkHasOnclickHandler(element) {
    var oldevent = document.getElementById("redirect").onclick;
    if (typeof oldevent == "function") {
        return true;
    }
    else {
        return false;
    }
}

如您所见，addOnloadHandler（）已使用您提到的本机实现重写。我没有碰script1.js

生成的代码仍然不起作用（即显示“错误！”警报消息）。只有通过取消对script2.js中第一行代码的注释，两次注册onload initAll1（）处理程序时，它才起作用

显然，混合

window.onload = handler1;

及

或

不好用

有没有什么方法可以解决这个问题，而不需要接触script1.js

如果您想知道为什么我不想接触script1.js，原因是我希望我的代码（script2.js）也可以在其他项目中重用，而不管每个项目使用其他哪些js文件。因此，它应该适用于script1.js中使用的所有可能的事件处理注册方法

再次感谢你的帮助

以防万一，未来的人们会发现这一点，并且正在寻找一种方法，在对象本身不支持

addEventListener

、

attachEvent

或其他形式的侦听器堆栈时使用多个事件处理程序-即，它是一个定制对象，实现不好。然后您可以执行以下操作：

object.onload = (function(pre){
  return function(){
    pre && pre.apply(this,arguments);
    /// do what you need for your listener here
  }
})(object.onload);

每次使用上述代码时，前一个

onload

listener将作为参数传入，当触发新的侦听器时，它将首先运行旧的侦听器-这意味着您可以像这样堆叠许多侦听器，如果您愿意的话。但是，只要始终使用上述代码将侦听器添加到对象中，这将只起作用。如果在其他地方用一个简单的

object.onload = function(){}

作为程序员的注意事项，如果您要实现库、插件或构造函数，那么其他程序员可能会接管您的工作。请，请为多个事件侦听器的功能编写代码。其实没那么难。

Hm，为什么不使用JS库来加载代码呢？可以混合使用事件注册方法，但是如果您对编写不引人注目的代码感兴趣，那么监听器就是一种选择。这是一个很有用的场景，可以提交到JS库，无论它是现成的还是您自己推出的。谢谢提示chprpipr！

window.attachEvent('onload', handler2);

object.onload = (function(pre){
  return function(){
    pre && pre.apply(this,arguments);
    /// do what you need for your listener here
  }
})(object.onload);

object.onload = function(){}