js中addEventListener的DOMContentLoaded

在JavaScript中，addEventListener是一个用于添加事件监听器的方法DOMContentLoaded是一个事件，当HTML文档被完全加载和解析时触发。通过使用addEventListener方法，可以在DOMContentLoaded事件发生时执行相应的操作。

例如，以下是使用addEventListener方法监听DOMContentLoaded事件的示例代码：

document.addEventListener('DOMContentLoaded', function() {
  // 在DOMContentLoaded事件发生时执行的代码
  console.log('DOM已加载');
});

在上述代码中，当HTML文档的DOM结构被完全加载和解析后，会触发DOMContentLoaded事件，并执行传递给addEventListener方法的回调函数。在回调函数中，可以编写需要在DOM加载完成后执行的代码。

相关问题

JS中的DOMContentLoaded 事件该怎么写

DOMContentLoaded 事件是在 DOM 树加载完成后触发的事件，它表示页面的 HTML 结构已经被解析成了 DOM 树，但是样式表、图片等外部资源可能还未加载完成。

在 JavaScript 中，可以通过 addEventListener() 方法来注册 DOMContentLoaded 事件的监听器，例如：

document.addEventListener('DOMContentLoaded', function() {
  // 页面的 DOM 树已经加载完成，可以进行一些 DOM 操作了
});

需要注意的是，DOMContentLoaded 事件只会在页面的 DOM 树加载完成后触发一次，如果在 DOMContentLoaded 事件回调函数中动态地添加了新的 DOM 元素，不会触发新的 DOMContentLoaded 事件。如果需要在新的 DOM 元素加载完成后执行一些操作，可以使用 MutationObserver 监听 DOM 树变化事件。

js window.addEventListener

`window.addEventListener` 是 JavaScript 中的一个内置方法，它允许你向网页窗口（`window` 对象）添加一个事件监听器。它的基本语法如下：

window.addEventListener(eventType, listenerFunction, useCapture = false);

参数说明：
- `eventType`: 需要监听的事件类型，例如 `"click"`, `"load"`, `"DOMContentLoaded"` 等。
- `listenerFunction`: 当指定事件发生时要执行的函数，也称为事件处理器或回调函数。
- `useCapture` (可选): 如果设置为 `true`，则事件将首先在捕获阶段（从最上层元素向下传播）触发，如果为 `false`（默认），则在冒泡阶段（从最底层元素向上传播）触发。

示例：

window.addEventListener("DOMContentLoaded", function() {
  // 这里会在页面加载完成后立即执行，可以初始化数据或者布局
  console.log("Page is loaded.");
});

在这个例子中，一旦页面的内容已经完全加载，`DOMContentLoaded` 事件处理器就会被调用。