javascript - 如何获取 imageLoaded 的参数 "someelement"？

Question

如何将参数“someDiv”传递给 imageLoaded？

我的困惑是由于 imageLoaded 被事件调用并且已经传递了它自己的参数(由参数“someImg”捕获)

window.onload = function()
{
    imageLoader(someURL, someDiv);

    function imageLoader(someURL, someDiv)
    {
        var someImg = document.createElement("img");

        someImg.addEventListener("load", imageLoaded, false); // <- line x
        someImg.src = someURL;
    }
}

function imageLoaded(someImg, someDiv)
{
    // assuming that someDiv has a background image, set the size of
    // the div to the size of the background image

    someDiv.style.width = someImg.target.width;
    someDiv.style.height = someImg.target.height;

    someImg.removeEventListener("load", imageLoaded, false);
}

我可以将第 x 行更改为

someImg.addEventListener("load", function(){imageLoaded(someImg, someDiv);}, false);

但是我无法删除 eventListener，因为我没有正确的函数引用

另一个问题是 onload 事件在文档加载过程结束时触发，此时所有图像都已完成加载。该事件怎么会仍然触发？

Answer 1

// Create a named function to handle the event
function loadedHandler() {
    // Now you can pass the params to your imageLoaded function
    imageLoaded(someImg, someDiv);
}

someImg.addEventListener("load", loadedHandler, false);
// And remove the listener
someImg.removeEventListener("load", loadedHandler);

您还可以使用事件对象的 target 属性来删除监听器。

// Create a named function to handle the event
function loadedHandler(event) {
    event.target.removeEventListener('load', loadedHandler);
}

该事件会触发，因为您正在 onLoad 中创建一个新元素并监听其上的 load 事件。尽管 someURL 参数中的图像可能已与文档的其余部分一起加载(从您的问题中不清楚是否是这种情况)，但需要加载(或再次加载)它您创建的新元素。