Question

今天我遇到了一个奇怪的问题：

引用名为window.onload的函数时，

onload似乎没有触发。

我之前从未注意到：

测试1 ：

window.onload=onload;
function onload(){
  console.log('event fired');
}

测试2 ：

window.onload=onload2;
function onload2(){
  console.log('event fired');
}

为什么第一个代码不起作用？

Answer 1

加载是您无法覆盖的预定义/预构建的javascript函数。它不起作用。

Answer 2

发生这种情况是因为范围。如果您在第二个示例中省略了window.，则为the alert will still fire。在第一个示例中，您将覆盖window.onload函数。

Answer 3

如果这样做，将覆盖由javascript构建的onload预定义函数。但是，如果要为函数赋予名称onload，则可以采用这种方式。

function onload() {
  alert("Page is loaded");
}

<!DOCTYPE html>
<html>
<body onload="onload()">

<h1>Hello World!</h1>

</body>
</html>

Answer 4

这里的问题是，在Web浏览器中，window被设置为全局对象。这意味着window.onload和onload指向相同的属性。

console.log(window.onload === onload); // true

所以您本质上就是在做

window.onload = window.onload;

什么都不会改变。

如果您想要一个具有相同名称的函数，可以将其放在IIFE中（或与此相关的任何函数中）。在这种情况下，您定义的函数将不会放入全局范围，因此不会与现有的window.onload冲突。

(function() {
  window.onload = onload;

  function onload() {
    console.log('event fired');
  }
})();

如果不必一定要赋予函数名称，可以在更改函数名称旁边将函数直接分配给onload，如下所示：

window.onload = function() {
  console.log('event fired');
};