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

Question

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

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

但是，当我尝试与load事件类似的事情时，它无法正常工作。这就是我的尝试：

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

此事件根本不会被触发。有谁知道我可能做错了什么，或者如何实现这个目标？

Answer 1

就其本质而言，委派的处理程序仅适用于冒泡的事件。并非所有人都这样做，load是其中之一。 The jQuery documentation甚至强调了这一点：

  

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

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

---

我的意思是＆＃34;委派的处理程序只适用于冒泡的事件＆＃34;：

冒泡的事件就像这样（在＃34; bubbling＆＃34;阶段，这是你通常使用的阶段）：事件在它发起的元素上触发，然后在该元素上触发＃39 ; s父级，然后 元素的父级等，直到它到达文档元素（html）。来自the DOM3 events spec的图表可能有助于更清楚：

使用委托处理程序（您在问题中使用的那种）依赖于冒泡。考虑一下这个HTML：

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

如果您执行$("#container").on("click", ".content", ...)，则不在＆＃34;内容＆＃34;上挂钩div，即使jQuery会让它看起来有点像你。您正在＆＃34;容器＆＃34;上挂钩活动。 DIV。当事件冒泡到容器div时，jQuery会查看它开始的位置并查看它是否通过任何内容＆＃34;在冒泡时分叉。如果确实如此，jQuery会调用你的处理程序，好像（大多数情况下）你将事件挂钩在＆＃34;内容＆＃34; DIV。这就是委托处理程序在以后添加元素时工作的原因;事件并没有挂在元素上，而是放在容器上。

这就是为什么它不能为load工作的原因：load没有泡沫，所以即使它触发了img元素你添加，它不会冒泡到父级，依此类推，所以你永远不会看到它。要看到它，你必须将它挂钩在特定元素上，而不是它的祖先。

Answer 2

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
);