javascript - 在 DOM 中使用 onload 和在 jQuery 中使用 .load() 有什么区别？

Question

例如：

<iframe onload="functionName('id-name', 'http://domain.com');"/>

相对

$('#id-name').load(functionName('id-name', "http://domain.com');

（实际上......我的 jQuery 对吗？）

更新：谢谢大家的回复。我在用着：

$('#id-name').load(function() {
    functionName('id-name', 'http://domain.com');
});

ETA：“body”应该是一个 iframe（哎呀），所以我没有使用 window.load。

score 4 · Accepted Answer

首先，你的 jQuery 的语法是错误的。类似的 jQuery 是：

$('#id-name').load(function() {
    functionName('id-name', "http://domain.com');
});

要绑定事件处理程序，您必须提供一个函数，您实际上是在绑定时调用该函数。

但是，由于某些原因，这并不等同。

首先，您将处理程序绑定到#id-name元素，而不是主体（除非您也这样做了<body id="id-name">。所以它不会在加载主体时运行，但只有在加载特定元素时才会运行。通常，每个元素加载处理程序仅对具有异步加载的单独源的元素有用（例如图像和 iframe）；它们允许您在填充这些元素时检测并采取行动。如果您正在动态更改源，这将特别有用。

其次，假设您的 jQuery 代码在$(document).ready(...)处理程序中，就像大多数 jQuery 代码一样，它直到 DOM 完全加载后才会运行。到那个时候，body的onload事件已经被触发了。此时添加的任何处理程序都不会为已加载的元素运行。我创建了一个小提琴来证明这一点：

<body onload="alert('inline body onload');">
    <div id="foo"></div>
</body>

$(document).ready(function () {
    $("#foo").load(function () {
        alert("foo onload");
    });

    $("body").load(function () {
        alert("jquery body onload");
    });
});

只有inline body onload警报触发。

但是，如果您只想要一个等效于将函数调用放在<body onload="">属性中的 jQuery，则$(document).ready()处理程序被认为是类似的。请参阅与 body onLoad 等效的 jQuery ，这是相关侧栏中的第一个问题。

但是，正如 Gloserio 的回答所说，$(window).load(...)尽管时机成熟，它确实有效（它被特别识别，类似于$(document).ready()）。这个修改过的小提琴演示了它。

score 0 · Accepted Answer

$(window).load(function () {
              functionName('id-name', "http://domain.com');
            });

似乎是一个足够公平的身体load事件。

javascript - 在 DOM 中使用 onload 和在 jQuery 中使用 .load() 有什么区别？

3 回答 3

Related

Reference