Cambia dinámicamente onmouseover o onmouseout para llamar a una función diferente

Question

¿Es posible cambiar una función invocada por un evento existente onmouseover o onmouseout? Para el siguiente ejemplo, ¿hay alguna manera para que ChangeItemAEvent cambie la función onmouseover "ItemA" de ChangeColor() a ChangeColorBack()? Actualmente necesito declarar una función completamente nueva() que siento que no es elegante porque estoy repitiendo el código cuando debería poder llamar a una función existente.

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

probar este

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

Answer 2

¿Es posible cambiar una función que es llamada por un evento onmouseover o onmouseout existente ?

Sí, escribiendo a la propiedad DOM element.onmouseover, con un valor de función. Puede ser un nombre de función o una expresión de función en línea.

Si haces todo el scripting por escrito a las propiedades de controlador de eventos (o añadir detectores de eventos) se puede tomar ventaja de this que apunta al elemento y evitar que pasa alrededor de los identificadores, lo que hace que sea más fácil:

<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> 

Sin embargo, para este tipo de trabajo de desplazamiento y selección, generalmente es mejor utilizar variables de estado o CSS en lugar de reasignar manejadores de eventos. Por ejemplo algo como:

#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 en un lapso no funciona en IE6, así que si usted necesita para hacer que el navegador asomar-destacado que tendría que tener onmouseover/mouseout código para agregar o quitar una .hover className.)