Javascript 现在和将来为img元素添加加载事件？

我想在图像上添加一个加载事件，即使在页面初始加载后将该图像添加到文档中，也会影响该图像。对于点击事件，我会做如下操作：

$(document).on('click', '.elem', function(e) {
    // do stuff
});

但是，当我尝试类似于

load

事件的方法时，它不起作用。这就是我尝试过的：

$(document).on('load', '.image', function() {
   // do stuff
});

---

此事件根本不会触发。有人知道我可能做错了什么，或者如何做到这一点吗？

从本质上讲，委托处理程序只适用于冒泡的事件。并非所有人都这样做，

load

是不这样做的人之一。甚至强调了这一点：

在所有浏览器中，加载、滚动和错误事件（例如，在元素上）都不会出现气泡

添加图像时，必须将加载处理程序添加到图像中

---

我所说的“委托处理程序仅适用于冒泡的事件”：

冒泡的事件是这样工作的（在“冒泡”阶段，这是您通常使用的阶段）：事件在它发起的元素上激发，然后在该元素的父元素上激发，然后在该元素的父元素上激发，等等，直到它到达文档元素（

html

）。此图可能有助于更清楚地说明这一点：

使用委托处理程序（您在问题中使用的类型）依赖于冒泡。考虑这个HTML:< /P>

<div id="container">
    <div class="content">xxxx</div>
    <div class="content">xxxx</div>
    <div class="content">xxxx</div>
</div>

xxxx
xxxx
xxxx

如果您在（“click”、“.content”、…）上执行

$（“#container”）。

您将而不是将事件挂接到“content”div上，即使jQuery会让它看起来有点像您。您正在将事件挂接到“container”div上。当事件冒泡到container div时，jQuery会查看它从何处开始，并查看冒泡期间是否通过了任何“content”div。如果是这样，jQuery调用处理程序就好像（大部分情况下）将事件挂接在“content”div上一样。这就是为什么在以后添加元素时委托处理程序可以工作的原因；事件不是挂接在元素上，而是挂接在容器上

---

这就是为什么它不适用于

load

：

load

不会冒泡，所以即使它在您添加的

img

元素上激发，它也不会冒泡到父元素，依此类推，所以您永远看不到它。要查看它，您必须将它连接到特定元素上，而不是它的祖先。

谢谢。我看到了那个信息，不知道它是什么意思。在这种情况下，“委托处理程序”是指将事件分配给所有未来元素的处理程序？我想知道是否有可能解释为什么在这种情况下，事件气泡是否会对赋值产生影响……@fraxture：这是委托处理程序如何工作的核心。我已经添加了一个解释，但它也值得一读jQuery文档。哇，这是一篇多么有趣的帖子，真的！虽然这可能是工作代码，但请添加一些解释，说明为什么这是问题的答案。同时，您可以修复代码的缩进。为什么不直接使用

$（'img'）。加载（function（）{}）

？

document.body.addEventListener(
    'load',

function (event) {
    var elm = event.target;
    if(elm.nodeName.toLowerCase() == 'img'){
    // do whetever you want with the elm
   }

},
true // Capture Phase
);