Question

是否可以更改现有onmouseover或onmouseout事件调用的函数？对于以下示例，我可以让ChangeItemAEvent将{Item 1“onmouseover函数从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：

<span id="ItemA" onmouseover="ChangeColor(this.id)">
<button id="ButtonB" onclick="ChangeItemAEvent()">

提前致谢

Answer 1

使用JavaScript而不是标记附加事件：

document.getElementById('ItemA').onmouseover = changeColorBack;

请注意，大写函数名称通常作为约定保留给构造函数然后在你的函数上使用this，它引用被调用的元素：

function changeColorBack() {
  this.style.background = "Black";
  this.style.color = "White";
}

现在，您可以在任何元素上使用这些函数，只需为元素的事件指定一个新函数，或者重写先前设置的函数。

Answer 2

另一种解决方案是创建toggleColor(elementId)函数：

function toggleColor(elementId) {
    if (this.style.color == "White") {
        this.style.background = "White";
        this.style.color = "Black";
    }else {
        this.style.background = "Black";
        this.style.color = "White";
    }
}

Answer 3

听起来你需要阅读不同的注册事件方法。值得注意的是，在JavaScript中注册事件有3种不同的方法。这些详见https://developer.mozilla.org/en-US/docs/DOM/event。另请注意，许多不同的JavaScript框架通过提供自己的方法以跨浏览器兼容的方式注册事件来增加这一点。

在您的示例中设置事件（例如此<button id="ButtonB" onclick="ChangeItemAEvent()">）的方法不是设置事件的推荐方法。既没有设置元素的.onmouseover或.onclick。

我建议您在Mozilla阅读有关事件的链接，然后如果您已经在使用JavaScript框架，请阅读有关事件的文档。

另请注意，您可能会发现或不会发现有用的removeEventListener方法。

Answer 4

这对我有用：

    function overBtn(btncalling) {
            document.getElementById(btncalling).style.backgroundColor = '#507CD1';
            document.getElementById(btncalling).style.color = 'White';
    }

    function outBtn(btncalling) {
            document.getElementById(btncalling).style.backgroundColor = 'White';
            document.getElementById(btncalling).style.color = '#507CD1';
    }

JavaScript改变onmouseover或onmouseout来调用不同的函数？

4 个答案: