Question

请使用以下代码：

HTML

<button id="button>click me</button>

JS - VERSION 1

window.onload = init;

function init() {
    console.log('init called');
    var button = document.getElementById('button');
    button.onclick = buttonClickHandler;
}

function buttonClickHandler() {
    console.log('button clicked');
}

vs Same HTML

JS - VERSION 2

window.onload = init();

在这两种情况下，'init called'会立即出现在控制台中，但在第二种情况下，会出现一个错误，表示按钮为空。

这里有2件事情在玩。 1）在版本1中，它等待DOM在版本2中加载2），它在DOM加载之前发生，或者看起来好像。

我的问题。请尽可能清楚地解释版本1中发生的情况与版本2中发生的情况。window.onload = init与window.onload = init()的内容有哪些技术术语？还请解释每个版本的行为。为什么1等待，但2不等？

脚本需要在按钮元素之前移动，例如在头部：http://jsfiddle.net/XMEjr/1/

Answer 1

版本1将init函数设置为window.onload事件上调用的函数。该行未调用该函数;它只是被分配（作为一个值）给一个属性。

版本2将init函数的结果设置为window.onload事件上调用的结果。这是()所带来的差异。

显然init函数在onload被触发之前被调用（以获得该结果并将其设置为onload处理程序）。因此函数启动，无法通过button id找到元素（因为DOM还没有准备好），所以getElementById返回null。然后尝试访问onclick的{{1}}属性会因错误而停止。

Answer 2

在你要分配的第二个中，将调用结果上传到init：）

如果您这样做，那将是相同的：

window.onload="init()"

在这种情况下，您将分配一个在DOM准备好后进行评估的String。

如果你这样做

window.onload=init

您正在分配对函数的引用。然后，当DOM准备就绪时，函数被调用

但如果你这样做：

 window.onload=init()

你可以做到

function init() { alert ("this is called before onload, dom is not ready, button doesnt exist"); return init2; }

function init2() { alert ("this is called on load, dom is ready, button and everything in the body is now created"); }

希望你明白这一点。

顺便说一句，这种情况对于这样的事情很有用：

window.onload=init()

function init() {
    if (IS_IPHONE) return init_iphone;
    if (IS_ANDROID) return init_android;
    if (IS_WINDOWS) return init_not_supported;
}

所以你选择执行onload的init方法。

JavaScript - 使用和不使用parens调用函数

2 个答案: