📅 最后修改于: 2023-12-03 15:14:42.806000 🧑 作者: Mango
在 web 开发中，我们常常需要在页面加载完成后执行某些 JavaScript 函数。其中一种常见的方式是在 <body> 标签最后插入 <script> 标签，但这种方式有时会造成页面加载时间过长。
另一种解决方案是使用 DOMContentLoaded 事件。它在 DOM 加载完成后触发，可以让我们在 DOM 完全加载完成后执行 JavaScript 代码。
下面是一个例子，演示如何在 <div> 元素加载完成后调用 JavaScript 函数：
<div id="my-div"></div>
<script>
function myFunction() {
// 在此处添加你的代码
console.log("Hello World!");
}
document.addEventListener("DOMContentLoaded", function(event) {
myFunction();
document.getElementById("my-div").addEventListener("load", myFunction);
});
</script>
在这个例子中，我们首先定义了一个名为 myFunction() 的 JavaScript 函数。然后，我们使用 document.addEventListener() 函数来添加一个 DOMContentLoaded 事件监听器。
在该事件监听器中，我们调用了 myFunction() 函数，并使用 document.getElementById() 函数获取了 <div> 元素的引用。接着，我们添加了一个 load 事件监听器，当 <div> 元素加载完成后再次调用 myFunction() 函数。
这就实现了在 <div> 元素加载完成后调用 JavaScript 函数的效果。
需要注意的是，如果使用 jQuery 等其他 JavaScript 库，也可以使用它们提供的函数进行 DOM 加载完成后的事件监听，例如 $(document).ready()。