时间戳

首页 > 解决方案 > 在添加事件时捕获变量值

javascript - 在添加事件时捕获变量值

问题描述

我正在用 javascript 创建一个图像轮播，在添加事件侦听器时遇到问题，具有图像指示器的基本代码是这样的：

Array.from(mCOMPLEX_ImgTags).forEach(
        function(eachImageTag){
            // mCOMPLEX_ImgPaths.push(eachImageTag.getAttribute("src"));
            
            carouselIndicator = new COMPLEX_Img(carouselIndicatorProps, true);
            
            
            carouselIndicator = carouselIndicator.make();

            carouselIndicator.addEventListener("mouseenter", enterEvent=>{
                    CssHelper.assignStyleProp(carouselIndicator,{"background":"#ffa500"} );
                    });

            carouselIndicator.addEventListener("mouseleave", enterEvent=>{
                    CssHelper.assignStyleProp(carouselIndicator,{"background":"#ff0000"});
                    });

            mCOMPLEX_Container.appendChild(carouselIndicator);
            

        });

现在指标很好并且放置得很好，但是，问题是该变量carouselIndicator似乎是对一个对象的引用，并且该引用在 javascript 中循环时发生了更改（即，在添加侦听器时未捕获引用的值，我希望）。结果，当我将鼠标悬停在 5 个指标中的任何一个上时，只有最后一个会突出显示。

如何保存应该保存的参考？即各个指标是否保存了它们的参考？

标签： javascript

解决方案

看起来它carouselIndicator是在循环中的闭包范围之外声明的forEach()，因此它只会引用内存中的单个位置。因为 Javascript 变量是通过引用分配/复制的，所以每次循环时，您只是在更新该内存位置的值。同时，您正在创建新的事件侦听器，但是它们都指向同一事物。

解决方案：在循环中声明您的 var。

        function(eachImageTag){
            let carouselIndicator = new COMPLEX_Img(carouselIndicatorProps, true);
//          ^^^

            ...
        }

推荐阅读