关于javascript中window.onload的困惑

Posted 2023-04-14

【中文标题】关于javascript中window.onload的困惑

【英文标题】：Confusion about window.onload in javascript

【发布时间】：2010-01-12 15:09:25

【问题描述】：

我有一段 javascript 代码。而且我不是很明白。 你能逐行解释吗？非常感谢。

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

这就是我的想法：

 function addLoadEvent(func)  //define a function with a parameter 'func'
  var oldonload = window.onload; //assign window.onload event to variable oldonload
  if (typeof window.onload != 'function')  //if window.onload is not a function, then...
    window.onload = func; //assign 'func' to window.onload event. what does func mean?
   else              //if window.onlad is a function
    window.onload = function()   //don't understand
      oldonload();  //call function oldonload()
      func();       //call function func()
    
  

困惑：

window.onload 已经是一个事件了，为什么还要使用 typeof？

函数 addLoadEvent(func) , window.onload = func, func()。这些功能有什么区别？

很抱歉发布了一个新手问题。但是感谢任何给我一些指导的人？

编辑：

这是 Simon Willison 改进的原始代码。

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

【问题讨论】：

这是 Simon Willison 在 2004 年最初编写的一些代码的旧版本：simonwillison.net/2004/May/26/addLoadEvent 请注意，Simon 在 2006 年更新了代码以处理 IE7 上的潜在问题 - 您可能想要合并他的更新.

感谢尼克菲茨提供的信息。我已经检查过了。

感谢大家的回复和解释。 :)

【参考方案1】：

它非常简单。

您检查是否已经注册了 onload 函数。

如果没有， 1.将传入的函数赋值给onload

如果有的话， 创建一个新的 onload 函数，它将：

调用旧的 onload 函数 调用你传入的“func”

和：

window.onload 已经是一个事件，并且 为什么要使用 typeof？

window.onload 可以是一个函数，但如果没有设置，它将是“未定义”，我们需要检查它的类型以查看它是什么。

函数 addLoadEvent(func) , window.onload = 函数，函数（）。什么是 这些功能的区别？

函数是javascript中的一个变量。所以你可以将函数称为

功能

你可以这样称呼它

函数()

在您的情况下：函数 addLoadEvent(func) 是当前函数定义。它需要一个参数，并且该参数应该是一个函数

window.onload = 函数 将你传入的函数分配给 onload 事件

函数()

调用你传入的函数

这里是逐行修正：

function addLoadEvent(func)  //define a new function called addLoadEvent which takes in one param which should be function
  var oldonload = window.onload; //assign window.onload event to variable oldonload
  if (typeof window.onload != 'function')  //if window.onload is not a function,  and thus has never been defined before elsewhere
    window.onload = func; //assign 'func' to window.onload event. set the function you passed in as the onload function
   else              //if window.onlad is a function - thus already defined, we dont want to overwrite it so we will..
    window.onload = function()   //define a new onload function that does the following:
      oldonload();  //do whatever the old onload function did
      func();       //and then do whatever your new passed in function does
    
  


//then call it like this: 
addLoadEvent(function() 
  alert("hi there");
);
addLoadEvent(function() 
  alert("this will be alerted after hi there");
);
//or like this:
var fn = function()
 alert("this will be the last thing alerted");
;
addLoadEvent(fn);

【讨论】：

你能在代码中逐行纠正我吗？我没有很好地掌握javascript。

@非常感谢你，mkoryak。我只想确保第 2 行上的“window.onload”。“window.onload”的可能性是什么？因为 David Dorward 说“这不是一个事件。它是一个可能是函数或未定义的属性”。你怎么看？

是的，他是对的。因为在 JS 中所有函数也是变量/属性。如果未设置，则未定义。如果已设置，则可以是 typeof 函数。我们通常称它为“onload 事件”，但实际上它是一个 onload 函数。语义

@myoryak，感谢您的解释。现在我明白了。 :)

window.onload 也可以是事件触发时将被评估的字符串。

【参考方案2】：

你能逐行解释吗？

我太懒了，但简而言之：

将 onload 复制到另一个变量 如果 onload 是一个函数，则将其设置为一个新函数，该函数运行传递的函数，然后运行旧函数 如果不是，只需让传递的函数在加载时运行

window.onload = 函数； // 将 'func' 分配给 window.onload 事件。 func是什么意思？

func 是定义为函数的第一个参数的变量（函数 addLoadEvent(func)）。函数是 JavaScript 中的第一类对象——你可以传递它们，就像任何其他变量一样。

window.onload 已经是一个事件了，为什么还要使用 typeof？

这不是一个事件。它是一个可能是函数或未定义的属性。事件是导致该函数运行的“发生的事情”。

函数 addLoadEvent(func) , window.onload = func, func()。这些功能有什么区别？

第一个定义了一个名为 addLoadEvent 的函数。第二个将一个名为 func 的函数分配给 onload。第三个调用一个名为 func 的函数。

顺便说一句，不要使用这个。使用addEventListener/attachEvent 或跨浏览器标准化它们的库，例如YUI 或jQuery。

【讨论】：

@David Dorward，非常感谢您逐行更正。你真好。 :)

【参考方案3】：

定义的函数addLoadEvent(func) 旨在为已经存在的window.onLoad 事件添加一个附加函数。因此，它做的第一件事就是检查window.onLoad 事件是否 是一个函数。如果没有，它只是将传入的函数分配给window.onLoad 事件。

但是，如果 window.onload 已经定义，它将重置它以调用原始的 onload 函数以及您传入的函数 (func)。

您可以像这样使用它来将您自己的事件添加到“堆栈”中：

addLoadEvent(function() 
  alert('Hello! I run after the original window.onload event if it exists!');
);

这会将一个匿名函数传递给 addLoadEvent 函数。这就是上面代码中window.onload = function() ... 中发生的情况。您也可以预先定义函数并像这样传递它：

var myOnloadEvent = function() 
  alert('Hello! I run after the original window.onload event if it exists!');
;

addLoadEvent(myOnloadEvent);

【讨论】：

@garcon1986 - 不客气！感谢您抽出宝贵时间表示感谢 :-)

【参考方案4】：

在 javascript 中，“函数”是变量可以采用的原始变量类型。 Javascript 也是松散类型的，所以变量的值取决于最后分配给它的东西。 “事件”只是窗口对象的一个​​成员变量。因此，您可以将其分配给您喜欢的任何内容。如果它从未被分配给任何东西，它将采用 javascipt 中“未定义”的原始值。所以检查：

if (typeof window.onload != 'function') 

确实在检查 window.onload 事件处理程序是否已经定义。

如果尚未定义，则此函数将 func 分配给 window.onload 事件处理程序（即 func 将在窗口加载时被调用）。

如果之前已定义，则此函数将创建一个新函数，该函数调用现有的 onload 处理程序，然后在窗口加载时调用 func。此示例还使用了名为“closure”的 javascript 属性/语言功能，因此新定义的“compose”函数可以访问其范围之上的变量，这些变量在外部函数失去范围后仍然存在。

也许更有意义的检查是：

if (typeof window.onload === 'undefined') 

【讨论】：

@thanks vicatcu。 typeof 返回值是“数字”、“字符串”、“布尔”、“对象”、“函数”和“未定义”。因此，window.onload 只有两种可能性，即“函数”和“未定义”。我说的对吗？

从技术上讲，它可以采用您提到的 任何 值，但是“未定义”和“函数”以外的任何其他值都可能是一个非常愚蠢的编程错误的结果:)。

我来这里换个说法：typeof返回值“number”、“string”、“boolean”、“object”、“null”和“undefined”。正如道格拉斯·克罗克福德所说。