Alter the prototype of an image tag?

Question

I am trying to write a library that would do the following.

When the library is included in the head, it would alter the HTMLImageElement prototype such that any ima

Answer 1

Important note: Vlad's solution is definitely simpler! But if you want to attach an event listener to any newly added element without using event bubbling (attaching event listeners to the document), read on.

---

After reading the following questions, I switched to a completely different solution.

• Modify prototypes of every possible DOM element

• JavaScript: override Date.prototype.constructor

It seems that one cannot override an event listener (as far as I have researched until now).

The actual solution: DOM mutation events

After creating a MutationObserver, one listens for added nodes, then checks whether they are images and one dynamically adds an error handler.

jsFiddle

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

---

You can also use the old DOMNodeInserted event which is also supported by IE 9:

jsFiddle

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 = ''