javascript - 如何将EventListener添加到所有IMG标签

Question

我有一个 ContentEditable div 元素（编辑器）。我想将 EventListener 添加到编辑器中的所有图像标签。我怎么能这样做。对于现有图像，我可以使用

var imageNodes = document.getElementsByTagName('IMG');
        for(var i=0;i<imageNodes.length;i++) {          
            imageNodes[i].addEventListener('DOMNodeRemoved',getRemovedNodeDetails,false);
        }

对于新输入的图像，我该怎么做。我可以为所有 IMG 标签添加样式，这样每当输入新图像时，监听器就会被添加到标签中。

Answer 1

发这个，不是因为wong的回答错了，只是有点太简短了。。

// Warning: Typed on the fly

document.body.addEventListener('DOMNodeRemoved',getRemovedNodeDetails,false);

function getRemovedNodeDetails(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;

  // Yea, there are times tagName returns a lowercase value.
  // I always normalize it for my own sanity.
  if (target.tagName.toUpperCase() === "IMG") {
    // Now, do something with target
  }
}

更多详情： http ://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/

Answer 2

您可以使用事件委托在父节点上添加事件侦听器，而不是在每个 img 标签上添加事件侦听器。这将提供更好的性能，更重要的是，您可以自然地以这种方式处理新添加的图像。