javascript - 如何使onmouseover和onmouseout不能作为内联函数工作

如何使mouseOver和mouseout正常工作而不在元素<div onmouseover="mouseOver()" >中调用它们

document.getElementById('smallBox').addEventListener("onmouseover", function() {
  document.getElementById('smallBox').style.color = "blue;"
});



document.getElementById('smallBox').addEventListener("onmouseout", function() {
  document.getElementById('smallBox').style.color = "yellow;"
});

#smallBox {
  background-color: green;
  width: 100px;
  height: 100px;
}

<div id="smallBox">hi</div>

最佳答案

事件的名称实际上是mouseover和mouseout。我必须更改的另一件事是color属性，该属性应该只是"blue"而不是"blue;"

document.getElementById('smallBox').addEventListener("mouseover", function() {
  document.getElementById('smallBox').style.color = "blue";
});


document.getElementById('smallBox').addEventListener("mouseout", function() {
  document.getElementById('smallBox').style.color = "yellow";
});

#smallBox {
  background-color: green;
  width: 100px;
  height: 100px;
}

<div id="smallBox">hi</div>