在前端开发中，我们经常需要在文档加载完成后执行某些操作，例如初始化变量、绑定事件等等。在过去，我们可能会使用jQuery库提供的 $(document).ready() 方法来实现这一功能。然而，随着ES6标准和DOM API的不断完善，我们现在也可以用原生JavaScript来实现类似的效果。
下面将介绍如何使用纯JavaScript编写一个与 $(document).ready() 相似的事件处理程序，并提供代码示例以及详细的解释说明。
1. 纯JavaScript实现 $(document).ready()
--------- -- -
-- ------- ------------------ --- ----------- -------
-------- ------------------ ------- -
------ - ------ -- - -------- ------ ----------- ------ ------- --------- --
--- --- - ------------------------------------
-------------------------- --------------- ------------------ ---------------
------ ----
-
--------------------- - -----------------------
------------------ - ------------
-----
-------- --------------- -
-- -------------------- --- ---------- -
-----------
- ---- -
--------------------------------------------- ----------
-
-上述代码中，我们定义了一个名为 ready 的函数，它接受一个回调函数作为参数。如果文档已完成加载，则直接调用回调函数；否则，使用 addEventListener 方法注册一个 DOMContentLoaded 事件监听器，以在文档加载完成后执行回调函数。
在 ready 函数中，我们首先检查 document.readyState 是否为 "loading"。如果不是，则代表文档已完成加载，可以直接调用回调函数；否则，我们使用 addEventListener 方法在文档对象上注册一个 DOMContentLoaded 事件监听器，以便在文档加载完成后执行回调函数。
在上述代码中，我们还定义了一个名为 CustomEvent 的构造函数，用于创建自定义事件。这是因为在早期版本的Internet Explorer浏览器中，并没有原生支持 CustomEvent 类型，因此我们需要手动实现这个类。
2. 使用示例
下面的代码展示了如何使用刚才定义的 ready 函数来执行一些初始化操作：
-------------- -- - -- ----- ---
当文档加载完成时，该匿名函数将被执行。
另外，由于我们使用了自定义事件类型 CustomEvent，可能需要在使用 dispatchEvent 方法触发自定义事件时进行兼容性检测。如果浏览器不支持 CustomEvent，则需要手动创建一个事件对象并设置其属性值。
3. 结论
在本文中，我们介绍了如何使用纯JavaScript编写一个与 $(document).ready() 相似的事件处理程序。通过使用 addEventListener 方法和 DOMContentLoaded 事件，我们可以在文档加载完成后执行任意代码。如果需要在早期版本的Internet Explorer浏览器中使用，我们还需要手动实现一个 CustomEvent 类型。
虽然使用jQuery库可以轻松地实现此功能，但在项目中使用jQuery会增加额外的文件大小、降低页面性能，并且可能导致一些不必要的安全问题。因此，在可行的情况下，应尽可能使用纯JavaScript来完成相同的任务。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28222