Dynamische Änderung onmouseover oder onmouseout, um eine andere Funktion aufzurufen

Question

Ist es möglich, eine Funktion zu ändern, die von einem vorhandenen Ereignis onmouseover oder onmouseout aufgerufen wird? Für das folgende Beispiel gibt es eine Möglichkeit für mich, ChangeItemAEvent die Funktion "ItemA" onmouseover von ChangeColor() zu ChangeColorBack() zu ändern? Derzeit muss ich eine völlig neue Funktion() deklarieren, die ich nicht elegant finde, weil ich Code wiederhole, wenn ich eine bestehende Funktion aufrufen kann.

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

Versuchen Sie, diese

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

Answer 2

Ist es möglich, eine Funktion zu ändern, die durch eine bestehende Onmouseover oder onmouseout Ereignis wird aufgerufen ?

Ja, indem auf das DOM element.onmouseover Eigenschaft zu schreiben, mit einem Funktionswert. Dies kann ein Funktionsname oder ein Inline-Funktionsausdruck sein.

Wenn Sie all Ihre Scripting durch, um Event-Handler-Eigenschaften zu schreiben (oder das Hinzufügen von Ereignis-Listener) Sie nutzen this auf das Element zeigen und vermeiden um IDs vorbei nehmen kann, was es einfacher macht:

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

Für diese Art von Hover-and-Select-Arbeit ist es normalerweise besser, State-Variablen oder CSS zu verwenden, anstatt Event-Handler neu zuzuweisen. Zum Beispiel so etwas wie:

#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 auf einer Spannweite funktioniert nicht in IE6, also, wenn Sie diesen Browser Hover-Highlight machen müssen, wäre Sie onmouseover/mouseout Code haben müssen hinzufügen oder eine .hover entfernen Klassenname.)