JavaScript的窗口之间有什么区别。onload和jQuery的$(document).ready()方法?


当前回答

窗口。onload是JavaScript内置函数。窗口。当HTML页面加载时,onload触发器。窗口。Onload只能写入一次。

文档。ready是jQuery库的一个函数。文档。ready在HTML文件中包含的HTML和所有JavaScript代码、CSS和图像完全加载时触发。 文档。Ready可以根据需要写多次。

其他回答

时间过得真快,现在是ECMAScript 2021年,人们越来越少使用IE11。相反,最多的两个事件是load和DOMContentLoaded。

DOMContentLoaded在初始HTML文档完全加载和解析后触发。

load在DOMContentLoaded和整个页面加载后触发, 等待所有相关资源完成加载。资源示例:脚本,样式表,图像和iframe等。

重点:同步脚本将暂停DOM的解析。

这两个事件都可以用来确定DOM是否可以使用。例子:

<script>
    // DOM hasn't been completely parsed
    document.body; // null

    window.addEventListener('DOMContentLoaded', () => {
        // Now safely manipulate DOM
        document.querySelector('#id');
        document.body.appendChild();
    });

    /**
     * Should be used only to detect a fully-loaded page.
     * 
     * If you just want to manipulate DOM safely, `DOMContentLoaded` is better.
     */
    window.addEventListener('load', () => {
        // Safely manipulate DOM too
        document.links;
    });
</script>

一个小提示:

一定要走窗户。addEventListener向窗口中添加一个事件。因为这样可以在不同的事件处理程序中执行代码。

正确的代码:

窗口。addEventListener('load', function () { alert('你好! ') }) 窗口。addEventListener('load', function () { alert('再见! ') })

无效的代码:

窗口。Onload = function () { alert('Hello!') //它不会工作!! } 窗口。Onload = function () { alert('再见! ') }

这是因为onload只是对象的属性,它会被覆盖。

与addEventListener类似,最好使用$(document).ready()而不是onload。

ready事件发生在HTML文档加载之后,而onload事件发生在稍后,当所有内容(例如图像)也已加载时。

onload事件是DOM中的标准事件,而ready事件是特定于jQuery的。ready事件的目的是,它应该在文档加载后尽可能早地发生,以便向页面中的元素添加功能的代码不必等待所有内容加载完毕。

窗口。onload是内置的JavaScript事件,但是由于它的实现在浏览器(Firefox、Internet Explorer 6、Internet Explorer 8和Opera)上有一些微妙的特点,jQuery提供了文档。ready,它将这些抽象出来,并在页面的DOM准备好后立即触发(不等待图像等)。

美元(文档)。准备(注意,这不是文档。ready(未定义)是一个jQuery函数,包装并提供以下事件的一致性:

DOMContentLoaded -一个新的事件,当文档的DOM加载时触发(这可能是在图像等加载之前的一段时间);同样,在ie浏览器和世界其他地方略有不同 和窗口。Onload(即使在旧浏览器中也实现了),当整个页面加载(图像,样式等)时触发。

在Internet Explorer中使用$(document).ready()需要注意。如果一个HTTP请求在整个文档加载之前被中断(例如,当一个页面流到浏览器时,另一个链接被单击)IE将触发$(document)。准备好活动。

如果$(document).ready()事件中的任何代码引用DOM对象,则存在找不到这些对象的可能性,并且可能发生Javascript错误。要么保护对这些对象的引用,要么将引用这些对象的代码延迟到窗口。负载的事件。

我无法在其他浏览器(特别是Chrome和Firefox)中重现此问题