0

是否可以更改由现有onmouseover或onmouseout事件调用的函数？对于以下示例，我是否可以ChangeItemAEvent将“ItemA”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()">

提前致谢

4

4 回答 4

1

在 JavaScript 中而不是在标记中附加事件：

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

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

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

现在，您可以在任何元素上使用这些函数，只需将新函数分配给元素的事件或覆盖之前设置的函数。

于 2012-11-06T02:47:01.137 回答
0

另一种解决方案是创建一个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";
    }
}
于 2012-11-06T02:50:16.320 回答
0

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

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

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

另请注意，有一个removeEventListener方法可能有用，也可能没用。

于 2012-11-06T02:59:49.047 回答
0

这对我有用：

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

于 2013-05-23T18:45:42.153 回答