Javascript DOMContentLoaded 事件

在主 HTML 内容已完全加载并处理完毕后，DOMContentLoaded 事件会发生，无需等待样式表、图形或子框架加载完成。该事件在 JavaScript 中是不可取消且通用的。

当在页面头部放置 JavaScript 并引用 body 中的元素时，我们必须处理 DOMContentLoaded 事件。当页面完全加载后，会触发另一个名为 load 的事件。当 DOMContentLoaded 更合适时，使用 load 代替它是一个常见的错误。

语法

DOMContentLoaded 事件方法，如 addEventListener()，使用带有 id 或 class 名称的事件名称。此方法是设置事件处理程序属性的替代选项。

DOM 内容加载时，将执行以下代码

示例

DOMContentLoaded 事件示例展示了如何在 JavaScript 中处理该事件。

示例 1：基本的 DOMContentLoaded 事件示例展示了事件处理程序数据。每次我们运行页面时，DOMContentLoaded 事件都会加载带有该事件的页面。这是一个具有 JavaScript 属性的基本事件。

输出

下图显示了 DOMContentLoaded 事件的输出。

示例 2：基本的 DOMContentLoaded 事件示例展示了带有数据的点击事件处理程序。

每次点击页面上的按钮时，DOMContentLoaded 事件都会加载带有该事件的页面。这是一个具有 JavaScript 属性的按钮点击事件。

输出

下图显示了 DOMContentLoaded 事件的输出。

示例 3：基本的 DOMContentLoaded 事件示例展示了带有数据的点击事件处理程序。

每次点击按钮时，DOMContentLoaded 事件会在几秒钟或给定时间后加载页面。此按钮点击事件与 JavaScript 的 "for" 函数属性配合使用。

输出

下图显示了 DOMContentLoaded 事件的输出。

示例 4：基本的 DOMContentLoaded 事件示例展示了带有数据的点击事件处理程序。

每次点击页面上的按钮时，DOMContentLoaded 事件都会加载带有该事件的页面。这是一个适用于 DOMContentLoaded 事件的带有数据的 JavaScript 函数。

输出

下图显示了 DOMContentLoaded 事件的输出。

结论

如果我们希望一旦用户请求页面就尽快解析 DOM，JavaScript 可以异步加载，并且样式表加载可以得到优化。正常加载的样式表会“窃取”主 HTML 内容的流量，并因并发加载而减慢 DOM 解析速度。