Dynamically change onmouseover or onmouseout to call a different function

Question

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.

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()">

Answer 1

Try this

function ChangeItemAEvent()
{
    document.getElementById("ItemA").onmouseover = function() {ChangeColorBack(this.id)};
}

Answer 2

Is it possible to change a function that is called by an existing onmouseover or onmouseout event?

Yes, by writing to the DOM element.onmouseover property, with a function value. This can be a function name or an inline function expression.

If you do all your scripting by writing to event handler properties (or adding event listeners) you can take advantage of this pointing to the element and avoid passing around IDs, which makes it easier:

<span id="ItemA">
<button type="button" id="ButtonB">

<script type="text/javascript">
    function ChangeColor() {
        this.style.background= 'orange';
        this.style.color= 'black';
    }

    function ChangeColorBack(elementid) {
        this.style.background= 'black';
        this.style.color= 'white';
    }

    document.getElementById('ItemA').onmouseover= ChangeColor;
    document.getElementById('ButtonB').onclick= function() {
        document.getElementById('ItemA').onmouseover= ChangeColorBack;
    };
</script>

However for this sort of hover-and-select work you are usually better off using state variables or CSS instead of re-assigning event handlers. For example something like:

#ItemA:hover { background: orange; color: black; }
#ItemA.selected:hover { background: black; color: white; }

document.getElementById('ButtonB').onclick= function() {
    var a= document.getElementById('ItemA');
    a.className= a.className==='selected'? '' : 'selected';
};

(:hover on a span doesn't work in IE6, so if you need to make that browser hover-highlight you would have to have onmouseover/mouseout code to add or remove a .hover className.)