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

Question

如何让 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>

Answer 1

事件的名称实际上是mouseover和mouseout。我必须更改的另一件事是颜色属性，它应该是 "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>