title: Dynamically change onmouseover or onmouseout to call a different function
body: <p>Is it possible to change a function that is called by an existing onmouseover or onmouseout event?  For the following example is there a way for me to have ChangeItemAEvent change the "ItemA" onmouseover function from ChangeColor() to ChangeColorBack()? Currently I need to declare an entirely new function() that I feel is not elegant because I am repeating code when I should be able to call an existing function.</p>
  
  <p>javascript:</p>
  
  <pre><code>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";
  
    };
  }
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;span id="ItemA" onmouseover="ChangeColor(this.id)"&gt;
  &lt;button id="ButtonB" onclick="ChangeItemAEvent()"&gt;
  </code></pre>