Javascript 动态更改onmouseover或onmouseout以调用不同的函数

是否可以更改由现有onmouseover或onmouseout事件调用的函数？对于下面的示例，有没有办法让ChangeItemAEvent将MouseOver函数上的“ItemA”从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:

试试这个

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

是否可以更改由现有onmouseover或onmouseout事件调用的函数

是的，通过使用函数值写入DOM

元素.onmouseover

属性。这可以是函数名或内联函数表达式

如果您通过写入事件处理程序属性（或添加事件侦听器）来编写所有脚本，则可以利用指向元素的

this

，避免传递ID，这会更容易：

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

（

：在span上悬停

在IE6中不起作用，因此如果需要突出显示浏览器悬停，则必须在mouseover上使用

/
鼠标出
代码来添加或删除
。悬停
类名。）

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

#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';
};