突出显示功能（mouseover/mouseout 事件监听器）不工作

Question

我遵循了一些关于突出显示单词的在线说明和一些面对面的建议，但我无法得到任何可以展示的东西。我还应该提到，我在控制台中没有收到任何错误消息。

这是.js：

let createWordElems = function() {

  for (var i = 0; i <= 54; i++) {
    var singleWord = document.createElement('span') // creating 'p' element, calling it singleWord
    singleWord.innerHTML = " " + shuffledWords[i]; // setting the content of the first word

    singleWord.addEventListener("click", clickFunc);
    // set onClick event for word

    var giantArrayElement = document.querySelector('.giant-array') // selecting .giant-array and storing it in var
    giantArrayElement.appendChild(singleWord); // appending singleWord to giantArrayElement
  }
}
createWordElems();



///// ======== ////// HIGHLIGHT ///// ======== //////

function highlight() {

  var selectSpan = document.querySelector('span')

  selectSpan.addEventListener("mouseover", function(evt) {
    evt.target.style.backgroundColor = "#ebce8e";
  });

  selectSpan.addEventListener("mouseout", function(evt) {
    evt.target.style.backgroundColor = "#473611";
  });
}

highlight();

更新：

window.addEventListener('onload',function() {
function highlight() {

  var selectSpan = document.querySelector('span')

  selectSpan.addEventListener("mouseover", function(evt) {
    evt.target.style.backgroundColor = "#ebce8e";
  });

  selectSpan.addEventListener("mouseout", function(evt) {
    evt.target.style.backgroundColor = "#473611";
  });

}
highlight();

});

Answer 1

.addEventListener 函数通常有点棘手，因为它通常只在元素完全加载后才起作用。为避免此问题，您应该将 highlight 函数放在

中

window.addEventListener('onload',function(){
  //your function here
}

让你的东西发挥作用。

突出显示功能（mouseover/mouseout 事件监听器）不工作

Highlight function (mouseover/mouseout event listeners) not working

javascript

function

dom

mouseover

event-listener