DOMContentLoaded是JavaScript中的一个重要事件，当HTML文档被完全加载和解析完成后触发，无需等待样式表、图像和子框架的完成加载。这个事件在网页开发中非常常用，尤其适用于需要操作DOM元素的JavaScript代码。

触发时机

  • 当HTML文档的DOM树构建完成后立即触发。

  • 不需要等待外部资源（如图片、样式表、脚本文件等）加载完成。

  • 早于 load 事件触发（ load 事件需要等待所有资源加载完成）。

实际应用场景

从我们查看的代码示例中可以看到，DOMContentLoaded事件常用于确保在执行 DOM 操作前，所有相关的 DOM 元素已经被加载和解析完成：

document.addEventListener('DOMContentLoaded', function() {
    // 获取所有复选框容器
    const labelContainer = document.querySelectorAll('.dmi-label');

    labelContainer.forEach(container => {
        // 添加拖放事件监听
        container.addEventListener('dragover', (e) => handleDragOver(e, container));
        container.addEventListener('drop', (e) => handleDrop(e, container));

        // 为每个label添加可拖动属性
        const labels = container.querySelectorAll('label');
        labels.forEach(label => {
            label.draggable = true;
            label.addEventListener('dragstart', handleDragStart);
            label.addEventListener('dragend', handleDragEnd);
        });
    });
    
    // ... 更多DOM操作代码 ...
});

与其他加载事件的区别

  • DOMContentLoaded：DOM解析完成后触发，无需等待资源加载。

  • load：整个页面（包括所有资源）加载完成后触发。

  • readystatechange：文档的readyState属性变化时触发，其中包含interactive状态（对应DOMContentLoaded）和complete状态（对应load）。

为什么需要使用DOMContentLoaded

  1. 提高用户体验：允许脚本尽早执行，而不必等待所有资源加载完成。

  2. 避免错误：确保在访问DOM元素前，这些元素已经存在于DOM树中。

  3. 优化页面加载性能：可以在页面资源加载的同时执行JavaScript，提高整体性能。

使用注意事项

  • 如果脚本是 </body> 标签前内联的，可能不需要使用DOMContentLoaded，因为此时DOM已经构建完成。

  • 对于使用async或defer属性的脚本，DOMContentLoaded事件的触发时机可能会有所不同。

  • 对于已经发生过的DOMContentLoaded事件，再次添加监听器不会执行回调函数。