Javascript addEventListener 无法正常工作

Question

所以我在事件上遇到了问题所以，通常我会尝试创建一个事件，如果我们在数组中有超过 1 个图像，这样我就可以mouseenter输入并显示另一个，但目前我不知道为什么但是当我们mouseenter输入预览时（图像）当我们还在循环中时，它给出了数组的最新结果？

    var product_type = "";
        for(let i = 0; i < this.products_list.length; i++){
            var row = this.products_list[i], self = this;
            if(row.product_type != product_type){
                product_type = row.product_type;  
                var sub_title = document.createElement("h2"),
                    separator = document.createElement("hr"),
                    display_list = document.createElement("ul");
                    sub_title.id = product_type;
                    sub_title.innerHTML = localeString.get(product_type);
                    display_list.id = product_type+"-list";

                    this.catalog.appendChild(sub_title);
                    this.catalog.appendChild(separator);
                    this.catalog.appendChild(display_list);     
            }
            var product = document.createElement("li"),
                preview = document.createElement("img"),
                container = document.createElement("div");
            var array_images = row.product_images.split(",");

                preview.src = this.assets+product_type+"/"+array_images[0]+".jpg";
                preview.alt = product_type+"#"+row.product_id;
                
                container.appendChild(preview);
                product.appendChild(container);

                preview.addEventListener("mouseenter", event => {
                    console.log(array_images);
                    //here, giving the latest element from the array and not the current selected.
                });

                display_list.appendChild(product);
                
            
        }

Answer 1

如果您尝试选择鼠标悬停事件，那么您应该使用鼠标悬停代替点击事件。 目前它不起作用，因为您调用的事件是点击事件。