如何向不存在的元素添加事件监听器(不需要jQuery)

How to add event listener to not-yet existing elements (without jQuery)?

本文关键字：监听器 不需要 jQuery 事件 添加 不存在 元素      更新时间：2023-09-26

下面是我简化的场景:

我试图访问一个图像链接，说，页"A"。我的脚本打开A页。但事情没那么简单。由于各种原因(即登录凭据，重定向)，我不能直接使用

window.open(url).getElement...

因为我在这里得到的不包含我想要的目标图像

我可以这样做的一种方法是设置 
window.open(url).onload=function(){//get the image};

也就是说，我可以在页面完全加载时获得图像(因此包括重定向)。

我的问题是，有没有一种方法可以在元素还不存在的情况下完成element.onload ?在这个场景中，它将在不等待图像完全加载的情况下获取图像URL

图像对象很适合这样做。只要把这个函数放在你想要加载图像的地方。

function loadImageInto(id){
    var image = new Image(); 
    image.onload = function(){
        document.getElementById(id).src = image.src;
    };
    image.src = "imagefile.jpg";
}

如果你需要一个事件处理程序，你可以这样做。

function loadImageInto(id){
    return function(){
        var element = this;
        if(typeof id !== 'undefined'){
            element = document.getElementById(id);
        }
        var image = new Image(); 
        image.onload = function(){
            element.src = image.src;
        };
        image.src = "imagefile.jpg";
    }
}

当然，这只会在你提前知道图像url的情况下起作用

相关文章：