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

イベントを登録するさまざまな方法について読む必要があるようです。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

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

これは私のために働く：

    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 に答える