DOM元素何时激活、事件绑定并可触发？img加载事件触发规则解析

一、DOM元素激活与事件触发能力的阶段 #

DOM元素在通过document.createElement创建完成的瞬间，就已经具备完整的事件绑定和事件触发能力，与是否挂载到主文档树没有任何关联：

• 事件绑定逻辑只要调用addEventListener或者赋值onxxx系列属性即可生效，不需要等待元素挂载。
• 仅依赖用户交互的UI事件（如click、mouseenter等）会因为元素不在渲染树中无法被用户操作触发，但自定义事件、元素自身生命周期相关的事件（如图片的加载/错误事件）完全不受挂载状态影响。

二、HTMLImageElement加载事件的表现解释 #

这几类差异的核心逻辑来自<template>元素的特性：<template>的content属于惰性文档片段，处于该上下文中的所有元素都不会执行资源加载、脚本运行、事件排队等操作，只有在内容被移出惰性上下文插入到正常文档环境时，相关逻辑才会被触发。

我们逐个解释示例中的表现：

• 第一个案例（未挂载的独立img）：img创建后属于当前活跃文档上下文，设置src后会正常启动资源加载流程，加载失败自然触发onerror。
• 第二个案例（放入DocumentFragment的img）：DocumentFragment只是临时的节点容器，本身属于当前活跃文档的普通上下文，不属于惰性环境，因此内部的img设置src后还是会正常加载，触发错误事件。
• 第三个案例（先放入template再设src）：img设置src时已经处于template的惰性上下文中，浏览器检测到环境属性后会直接跳过加载流程，因此不会触发任何加载相关事件。
• 第四个案例（先设src再放入template）：img设置src时还处于正常的活跃文档上下文，加载流程已经启动，后续移入template的操作不会中断已经开始的加载任务，因此加载失败后还是会触发onerror。

补充说明：设置src/srcset触发加载的前置校验中，会先判断元素当前所在的上下文是否为惰性环境，只有非惰性环境下才会触发后续的加载、事件排队逻辑，这就是上述差异的核心原因。

内容的提问来源于stack exchange，提问作者Masklinn