javascript – 添加多个onload处理程序

2019-07-26 13:37:03 阅读：191 来源： 互联网

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

更具体地说,这是我的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>

它加载两个js文件,script1.js和script2.js.

以下是导致(至少是我)意外行为的这两个脚本的版本.

Script1.js：

window.onload = initAll1(); // attach first onl oad handler

function initAll1() {
 alert("initAll1");
 document.getElementById("redirect").onclick = foo; // attach an onclick handler
}

function foo() {
 alert("we are in foo"); 
 return false;
}

Script2.js：

addOnloadHandler(initAll2); // with this we should attach a second onl oad 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(“redirect”)已经将foo()作为onclick事件处理程序附加的事实(请参阅initAll1()).警告信息“错误！”被触发,这对我来说似乎是错误的行为.

当我忘记addOnloadHandler()并使用以下命令附加Script1.js中的两个onload处理程序时：

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

然后一切都按预期工作,initAll2()启动“正确！”警报信息.

addOnloadHandler()有什么问题吗？任何人都可以使它工作吗？我真的想用它而不是第二种方法.

谢谢！

解决方法:

以防万一未来人们发现这一点,并且正在寻找一种方法来使用多个事件处理程序,当对象本身不支持addEventListener,attachEvent或其他形式的侦听器堆叠时 – 即它是一个定制的对象,实现得很糟糕.然后,您可以执行以下操作：

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

每次使用上面的代码时,前一个onload监听器都作为参数传入,当你的新监听器被触发时,它首先运行旧的监听器 – 这意味着如果你愿意,你可以堆叠许多这样的监听器.但是,只有在上面的代码始终用于向对象添加侦听器时,这才会起作用.如果在其他地方被简单地覆盖,那么你所有的努力都将被取消：

object.onload = function(){}

作为编码员的注释,如果要实现库,插件或构造函数,其他编码人员可能会接管您的工作.请为多个事件监听器编写代码.这真的不那么难.

标签：javascript,event-handling,onload
来源： https://codeday.me/bug/20190726/1544512.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 添加多个onload处理程序