Javascript 改变图像标签的原型？

我正在尝试编写一个库，它将执行以下操作

当库包含在head中时，它将改变HTMLImageElement原型，这样用户在HTML中使用的或在javascript中动态创建的任何图像标记都将具有由我的库定义的默认onerror函数

这样做的结果是，如果任何用户的图像由于指向错误的url而无法加载，我的库将以优雅的方式处理它

我试着做下面的实验

var img = document.createElement('img');
  img.__proto__.onerror = function() {
    alert('hi');
  };
  document.body.innerHTML = '<img id="foo" src="bar.png"/>'

var img=document.createElement（'img'）；
img.\uuuu proto\uuuu.onerror=函数（）{
警报（“hi”）；
};
document.body.innerHTML=“”

其中bar.png文件不存在且不起作用

但是如果我只是做一些像

  document.body.innerHTML = '<img id="foo" src="bar.png" ' +
    'onerror="this.src = MODIT.getImage(\'blackTile\').src;"/>';

document.body.innerHTML=''；

那很好。这里MODIT.getImage（）是一个返回图像元素的函数。您可以在此处使用此代码：

我想做的事可能吗？或者，是否有一种方法可以全局捕获所有403 GET错误，并以某种方式使用javascript处理它们

---

谢谢

重要提示： Vlad的解决方案绝对更简单！但是，如果希望在不使用事件冒泡的情况下将事件侦听器附加到任何新添加的元素（将事件侦听器附加到文档），请继续阅读

---

读了下面的问题后，我换了一个完全不同的解决方案

似乎无法覆盖事件侦听器（就我到目前为止的研究而言）

实际解决方案：DOM突变事件

创建后，将侦听添加的节点，然后检查它们是否为图像，并动态添加错误处理程序

---

请参阅：

应该注意的是，根据MDN网站，IE11是第一个理解这一点的IE。因此，IE10及以下版本可能不得不求助于老式的突变事件。@Stephen感谢您的留言。我添加了另一个包含

domandeinserted

事件侦听器的示例。这是非常好的信息，谢谢。我在争论我更喜欢这个还是弗拉德的方法。我需要在这两个方面都做些试验。在我看来，这比你需要的更具防御性。任何支持

addEventListener

的浏览器都将支持

e

参数和

e.target

和

e.target.nodeName

，并将以所有大写形式返回标记名。出现这种情况时，是否有办法抑制console GET错误？我不希望它出现在控制台中。@Asotherland我认为这是不可能的。@vlad如果由于css样式图像导入失败而发生错误，则似乎不会触发窗口错误事件，例如：document.body.innerHTML=“”；你知道怎么处理那个案子吗？@Asotherland不知道，对不起。

function imgError() {
    alert("Failed to load image!");
}

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var config = {
    childList: true
};

var observer = new MutationObserver(function (mutations) {
    mutations.forEach(function (mutation) {
        var addedNodesCount = mutation.addedNodes.length;
        for (var i=0; i<addedNodesCount; i++) {
            var node = mutation.addedNodes.item(i);

            if (node.tagName == "IMG") {
                node.addEventListener("error", imgError);
            }
        }
    });
});

// pass in the target node, as well as the observer options
observer.observe(document.body, config);

document.body.innerHTML = '<img id="foo" src="bar.png"/>'

function imgError() {
    alert("Failed to load image!");
}

document.body.addEventListener("DOMNodeInserted", function (evt) {
    if (evt.target.tagName == "IMG") {
        evt.target.addEventListener("error", imgError);
    }
});

document.body.innerHTML = '<img id="foo" src="bar.png"/>'

window.addEventListener("error", function(e) {
    if ( e && e.target && e.target.nodeName && e.target.nodeName.toLowerCase() == "img" ) {
        alert( 'Bad image src: ' + e.target.src);
    }
}, true);