无法将eventlistener附加到<img/>的onload事件 - 标记

Question

我想知道为什么我不能将eventlistener附加到html图像的onload事件。

<img id="imageID" onload="doSomething();">效果很好，

但如果我想添加一个像

这样的监听器

document.getElementById('imageID').addEventListener('onload', function(e) {
     doSomething();
     });

或使用jQuery

$("imageID").on("onload", function(){
doSomething();
});

事件没有被捕获。如果我听一个简单的“点击”-Event它可以工作，但不能用“onload”-Event。

有人可以告诉我这种行为的原因吗？

Answer 1

请勿在活动名称中加入"on"。

                              // no "on"------------v
document.getElementById('imageID').addEventListener('load', function(e) {

---

   // no "on"----v
$("#imageID").on("load", function(){
// ^----need "#"

Answer 2

这里有两个问题。

1. 您不会在事件名称中添加“on”，如I Hate Lazy said。

2. 如果您尝试将加载事件挂钩到已经在页面上的图像上，您将遇到竞争条件，有时无法看到该事件，因为它可以在它放在页面上的瞬间“加载”（如果相关图像在缓存中）。您必须在之前挂钩图像具有src属性，这通常意味着动态添加图像。您的DOM0处理程序（onload="doSomething()"）有效，因为它已经在图像添加到文档时附加了，但是稍后在页面上查看图像的任何内容（getElementById或jQuery）可能会错过它。