Динамически изменять onmouseover или onmouseout для вызова другой функции

Можно ли изменить функцию, вызываемую существующим событием onmouseover или onmouseout? В следующем примере есть ли у меня способ заставить ChangeItemAEvent изменить функцию «ItemA» onmouseover с ChangeColor () на ChangeColorBack ()? В настоящее время мне нужно объявить совершенно новую функцию (), которая, на мой взгляд, не изящна, потому что я повторяю код, когда я могу вызвать существующую функцию.

javascript:

function ChangeColor(elementid)
{
  document.getElementById(elementid).style.background = "Orange";
  document.getElementById(elementid).style.color = "Black";
}

function ChangeColorBack(elementid)
{
  document.getElementById(elementid).style.background = "Black";
  document.getElementById(elementid).style.color = "White";
}

function ChangeItemAEvent()
{
  document.getElementById("ItemA").onmouseover = function() {

    document.getElementById("ItemA").style.background = "Black";
  document.getElementById("ItemA").style.color = "White";

  };
}

html:

<span id="ItemA" onmouseover="ChangeColor(this.id)">
<button id="ButtonB" onclick="ChangeItemAEvent()">