为什么我的 onMouseOver 效果不起作用？

Question

如标题所述，我的 onMouseOver 事件侦听器无法正常工作。我可以在 CSS 中创建一个 'hover' 伪 class 并让它以这种方式工作，但我想为此创建一个事件侦听器。

代码：

let container = document.getElementById('container');

//function to create 16x16 grid
function gridSquares () {

  for (x = 0; x < 256; x++) {
    let squares = document.createElement('div');
    squares.className = 'grid-square';
    container.appendChild(squares);

    //mouse-over event listener for each grid
    squares.addEventListener('onmouseover', function () {
      const gridSquare = document.getElementsByClassName('grid-square');

      gridSquare.setAttribute('style', 'background: yellow');
    });

  }
}

gridSquares();

我在我的 HTML 中也创建了一个 ID 为 'container' 的 div。

有什么想法吗？

Answer 1

很确定不是

squares.addEventListener('onmouseover', function() {...

但是是：

squares.addEventListener('mouseover', function() {...

您应该删除事件侦听器中的 'on'

为什么我的 onMouseOver 效果不起作用？

How come my onMouseOver effect is not working?

javascript

for-loop

function

dom-events