在前端开发中，有时需要在页面加载完成后执行一些初始化操作。这时候可以通过给 body 标签添加 onload 事件来实现。本文将介绍如何使用 JavaScript 绑定 body 的 onload 事件，并提供示例代码以供参考。
基本原理
在 HTML 中，可以通过给 body 标签添加 onload 属性来指定一个函数，在 body 加载完毕后自动调用该函数。例如：
<body onload="init()"> <!-- 页面内容 --> </body>
但是，我们通常更喜欢使用 JavaScript 动态地为元素添加事件处理程序。因此，我们可以使用 JavaScript 的 addEventListener 方法来监听 body 元素的 load 事件，从而达到与上述方法相同的效果。
实现步骤
- 获取 body 元素
首先，需要获取页面的 body 元素。这可以通过 document.body 或 document.getElementsByTagName('body')[0] 来获取。
let body = document.body;
- 绑定事件处理程序
接下来，使用 addEventListener 方法来为 body 元素添加 load 事件的处理程序。注意，由于 load 事件只会触发一次，因此不需要考虑重复绑定的问题。
body.addEventListener('load', function() {
// 在此处编写初始化代码
});- 编写初始化代码
最后，在添加的事件处理程序中编写需要执行的初始化代码即可。
body.addEventListener('load', function() {
console.log('页面加载完成');
// 在此处编写初始化代码
});示例代码
下面是一个完整的示例，该示例在页面加载完成后会向页面添加一段文本：
-- -------------------- ---- -------
--------- -----
------
------
--------- ---------- -- ---- - ------ ----------
-------
------
--------
--- ---- - --------------
----------------------------- ---------- -
----------------------
--- - - ----------------------------
----------- - ------- --------
--------------------
---
---------
-------
-------总结
本文介绍了如何使用 JavaScript 绑定 body 的 onload 事件。通过动态地为元素添加事件处理程序，可以更加灵活地控制程序的行为。希望这篇文章对前端开发初学者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26605