vanilla document.ready 函数 - Javascript (1)

📌 相关文章

📜 vanilla document.ready 函数 - Javascript (1)

📅 最后修改于: 2023-12-03 15:20:56.760000 🧑 作者: Mango

Vanilla document.ready 函数 - Javascript

在许多前端开发的应用中，Vanilla JS 是一个非常流行的 Javacsript 框架。在其 API 中，一个非常实用的方法是 document.ready，它能在页面已经加载到 DOM 时触发一个函数，避免在DOM未加载完成时调用操作，极大地提高了编写JavaScript的效率。

使用方法

使用 Vanilla JS 的 document.ready 函数十分容易。首先，你需要确保要执行的函数已经被定义在文档的作用域内：

function myFunction() {
    alert("Hello world!");
}

然后，你需要在文档头部添加以下代码：

document.addEventListener("DOMContentLoaded", function() {
    myFunction();
});

这样，当文档加载完成后，myFunction 函数就会被调用。在这里，我们将 myFunction 函数作为回调函数传递给了 document.addEventListener 函数，并将 "DOMContentLoaded" 作为第一个参数传入。

代码片段

以下是在文档加载完成后弹出消息框的完整代码片段：

<!DOCTYPE html>
<html>
<head>
    <title>Vanilla document.ready 函数 - Javascript</title>
</head>
<body>

<script>
    function myFunction() {
        alert("Hello world!");
    }

    document.addEventListener("DOMContentLoaded", function() {
        myFunction();
    });
</script>

</body>
</html>

总结

Vanilla JS 的 document.ready 函数是一个非常实用的功能，它可以确保在 DOM 加载完成后再执行某些函数，避免了DOM未加载完成时无法操作的情况。它的使用方法非常简单，只需要将要执行的函数作为回调函数传给 document.addEventListener，并将 "DOMContentLoaded" 作为第一个参数即可。