JavaScript -调用带有或不带有父元素的函数

JavaScript - Calling a function with and without parens

本文关键字：元素 函数 调用 JavaScript      更新时间：2023-09-26

取以下代码:

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相同的HTML

JS - VERSION 2

window.onload = init();

在这两种情况下，'init called'立即出现在控制台中，但在第二种情况下，它后面跟着一个错误，说明button为null。

这里有两件事在起作用。1)在版本1中，它等待DOM加载;2)在版本2中，它发生在DOM加载之前，或者看起来是这样。

我的问题。请尽可能清楚地解释版本1和版本2中发生的事情。window.onload = init和window.onload = init()的专业术语是什么?也请解释每个版本的行为。为什么1等，而2不等?

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

版本1设置init函数为window.onload事件时调用的函数。函数不会在该行被调用;它只是作为一个值赋值给一个属性。

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

显然init函数在onload被触发之前被调用(以获得该结果并将其设置为onload处理程序)。因此，该函数启动时，未能通过button id找到元素(因为DOM尚未准备好)，因此getElementById返回null。然后尝试访问null的onclick属性以错误停止它。

在第二个你正在分配的onload调用init的结果:)

window.onload="init()"

在这种情况下，您正在分配一个字符串，该字符串在DOM就绪时进行评估。

如果你这样做

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;
}
选择哪个init方法来执行onload。
相关文章：