为何onload后绑定的事件处理程序能捕获页面加载前的图片错误事件？

咱们先揪出你代码里的核心问题——这也是你看到error弹窗的直接原因：

document.getElementById("myImg").addEventListener("error", ErrorHappened());

你这里写的ErrorHappened()是直接调用了这个函数，而不是把函数作为事件处理程序绑定到error事件上！也就是说，当myFunction执行到这一行时，不管图片有没有触发error事件，都会立刻执行ErrorHappened()，所以你会看到弹出error。

再解释下为什么complete属性显示true：

• 图片的complete属性返回true的条件是：图片已经完成了加载尝试，不管加载成功还是失败。你的图片src指向不存在的资源，浏览器尝试加载失败后，这个属性就会变成true，所以第一个弹窗会显示Image loaded: true。

如果咱们修正代码，把事件绑定改成正确的形式（去掉括号，传递函数引用）：

document.getElementById("myImg").addEventListener("error", ErrorHappened);

这时候再运行代码，你会发现不会弹出"error"——因为图片的error事件在body.onload触发之前就已经发生了，而error事件属于不会冒泡的事件，也没有机制能在事件发生后再绑定处理程序并触发它。这才符合你原本的预期：事件处理程序绑定在事件发生之后，无法感知到之前的失败。

总结一下：

• 你看到的error弹窗不是事件触发的，而是绑定事件时直接调用函数导致的
• complete为true是因为图片已经完成了加载尝试（失败也算完成尝试）
• 正确绑定事件后，确实无法捕获到之前发生的error事件

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