Class-wide 事件发生故障

Question

我在 JavaScript 中创建了 divs 的 16x16 网格。每个 div 都有一个 mouse enter 事件（继承自 common class）应该改变它的 black背景为白色.

这是我的问题： 而每个 div 在悬停时应该改变颜色，所有 divs （悬停时）导致相同的底部 -对div变色，而不是自己。

我相信所有事件都引用了 class 名称 "squares" 下的最终 div（右下角 div）。 如何让每个事件都引用它自己的 div？

快照

代码

    //GRID CREATION (30x30)
    var container = document.getElementById('container');
    var size = 30;

    //Row Creation (30)
    for(j=0; j < size; j++) {
        var row = document.createElement('div');
        row.classList.add("row");

        //Square Creation (30 per Row)
        for(i=0; i<size; i++) {
            var square = document.createElement('div')
            square.classList.add("square");

            //div background-color changes on mouse-enter   
            square.addEventListener('mouseenter', () => { 
                this.square.style.background = 'white';
            });

            row.appendChild(square);
        }
        container.append(row);
    }

Answer 1

当没有其他内容指向 this.square 时，在事件侦听器中找到 this.square 很奇怪。也许你最初尝试 square.style.background，由于 JavaScript closure inside loops – simple practical example 中描述的原因而没有工作，然后尝试用 this.style.background = 'white'; 修复它，但没有工作，因为它是一个箭头函数，然后尝试让 this.square 工作......?

无论如何，使用 non-arrow 函数，让 this 成为事件侦听器附加到的元素，而不是与外部的 this 相同：

square.addEventListener('mouseenter', <b>function ()</b> { 
    <b>this</b>.style.background = 'white';
});

或更好，用 let 声明你的变量——它必须可用，因为你使用的是箭头函数——并参考 square:

//GRID CREATION (30x30)
let container = document.getElementById('container');
let size = 30;

//Row Creation (30)
for (let j = 0; j < size; j++) {
    let row = document.createElement('div');
    row.classList.add("row");

    //Square Creation (30 per Row)
    for (let i = 0; i < size; i++) {
        let square = document.createElement('div');
        square.classList.add("square");

        //div background-color changes on mouse-enter   
        square.addEventListener('mouseenter', () => { 
            square.style.background = 'white';
        });

        row.appendChild(square);
    }
    container.append(row);
}

j 和 i 的声明也丢失了。您应该启用 strict mode 而永远不要使用 var 来避免这些类型的问题。

Class-wide 事件发生故障

Class-wide Event is Malfunctioning

javascript

class

events

mouseenter