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参数中的图像可能已经加载了文档的其余部分（从您的问题中不清楚是否是这种情况），但是需要为新元素加载（或再次加载）它已经创造了。

如何将参数“someelement”添加到imageLoaded？

1 个答案: