javascript - 如何为 setAttribute 添加回调？

Question

setAttribute是否可以在 Prototype上添加回调？

对于此示例，我想显示alert("done !")何时setAttribute()完成。

img.setAttribute("src", "http://blabla.com/c.jpg");

Answer 1

可能不是黄金解决方案，但

img.setAttribute("src", "http://blabla.com/c.jpg");
img.onload = imageCallback;

function imageCallback() { ... }

如果您对 jQuery 感兴趣，有一个名为waitforimages的插件可能会有所帮助。

Answer 2

可以，但我不推荐。

(function() {

    var elementSetAttribute = Element.prototype.setAttribute;

    Element.prototype.setAttribute = function() {
        whateverFunctionYouWant.call(this);

        return elementSetAttribute.apply(this, arguments);
    }

})();

js小提琴。

当whateverFunctionYouWant()您执行诸如document.links[0].setAttribute('href', '/').

src当您更改元素的属性img并且新资源已加载时，您似乎希望它调用回调......

(function() {

    var HTMLImageElementSetAttribute = HTMLImageElement.prototype.setAttribute;

    HTMLImageElement.prototype.setAttribute = function(attribute, value) {
        var image;

        if (attribute == 'src') {
            image = new Image;
            image.addEventListener('load', loaded, false);
            image.src = value;
        }

        return HTMLImageElementSetAttribute.apply(this, arguments);
    }

})();

js小提琴。

您可以在这里使用第三个参数重载setAttribute()，这将是回调。

根据我的观点和经验，我会为此创建一个不同的函数。修改原型是一回事，但是重载原生 DOM 方法来做额外的事情听起来像是在招惹麻烦，尤其是当一个不熟悉你所做的事情的开发人员查看代码时。

不用说，如果您希望后一个示例在 IE9 中工作，请使用attachEvent()后备来添加事件侦听器。